@lifi/widget 1.21.0 → 1.22.1

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

@@ -2,7 +2,7 @@
 export declare const LinkButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "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" | "onResize" | "onResizeCapture" | "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/components/Step/StepTimer.js

@@ -45,7 +45,7 @@ export const StepTimer = ({ step, hideInProgress, }) => {
     ]);
     if (!isExecutionStarted) {
         return (_jsx(_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/components/StepActions/StepActions.js

@@ -41,7 +41,12 @@ export const StepActions = (_a) => {
 };
 export const StepDetailsContent = ({ step }) => {
     var _a, _b;
-    return (_jsxs(Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals), ' ', step.action.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), 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 } = useTranslation();
+    return (_jsxs(Typography, Object.assign({ fontSize: 12, fontWeight: "500", color: "text.secondary", alignItems: "center", display: "flex" }, { children: [t('format.number', {
+                value: formatTokenAmount(step.estimate.fromAmount, step.action.fromToken.decimals),
+            }), ' ', step.action.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { fontSize: 18, paddingX: 0.5 } }), t('format.number', {
+                value: 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] })));
 };
 export const CrossStepDetailsLabel = ({ step }) => {
     var _a, _b;

package/components/SwapButton/SwapButton.js

@@ -18,12 +18,12 @@ import { navigationRoutes } from '../../utils';
 export const SwapButton = forwardRef(({ onClick, currentRoute, text, disable, enableLoading, loading }, ref) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
-    const config = useWidgetConfig();
+    const { variant, walletManagement } = useWidgetConfig();
     const { account, connect } = useWallet();
     const { insufficientFunds, insufficientGas, isLoading: isGasSufficiencyLoading, } = useGasSufficiency(currentRoute);
     const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive) {
-            if (config.walletManagement) {
+            if (walletManagement) {
                 yield connect();
             }
             else {
@@ -37,9 +37,14 @@ export const SwapButton = forwardRef(({ onClick, currentRoute, text, disable, en
     const getButtonText = () => {
         if (account.isActive) {
             if (!currentRoute) {
-                return t(`button.swap`);
+                return variant !== 'refuel' ? t(`button.swap`) : t(`button.getGas`);
             }
-            return text || t(`button.reviewSwap`);
+            if (text) {
+                return text;
+            }
+            return variant !== 'refuel'
+                ? t(`button.reviewSwap`)
+                : t(`button.startSwap`);
         }
         return t(`button.connectWallet`);
     };

package/components/SwapInput/FormPriceHelperText.js

@@ -19,9 +19,9 @@ export const FormPriceHelperText = ({ formType, selected }) => {
     return (_jsxs(FormHelperText, Object.assign({ component: "div", sx: { display: 'flex', justifyContent: 'space-between', margin: 0 } }, { children: [_jsx(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 ? (_jsx(Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : (token === null || token === void 0 ? void 0 : token.amount) ? (_jsx(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 ? (_jsx(Skeleton, { variant: "text", width: 48, height: 16, sx: { borderRadius: 0.25 } })) : (token === null || token === void 0 ? void 0 : token.amount) ? (_jsx(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] })));
 };

package/components/SwapInput/SwapInput.js

@@ -3,7 +3,8 @@ import { useLayoutEffect, useRef } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useChain, useToken } from '../../hooks';
-import { SwapFormKeyHelper } from '../../providers';
+import { SwapFormKeyHelper, useWidgetConfig } from '../../providers';
+import { DisabledUI } from '../../types';
 import { fitInputText, formatAmount } from '../../utils';
 import { Card, CardTitle } from '../Card';
 import { TokenAvatar } from '../TokenAvatar';
@@ -13,6 +14,7 @@ import { SwapInputAdornment } from './SwapInputAdornment';
 export const SwapInput = ({ formType }) => {
     const { t } = useTranslation();
     const { setValue } = useFormContext();
+    const { disabledUI } = useWidgetConfig();
     const ref = useRef(null);
     const amountKey = SwapFormKeyHelper.getAmountKey(formType);
     const [amount, chainId, tokenAddress] = useWatch({
@@ -40,7 +42,8 @@ export const SwapInput = ({ formType }) => {
     useLayoutEffect(() => {
         fitInputText(maxInputFontSize, minInputFontSize, ref.current);
     }, [amount]);
-    return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t('swap.amount') }), _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: isSelected ? (_jsx(TokenAvatar, { token: token, sx: { marginLeft: 2 } })) : null, endAdornment: _jsx(SwapInputAdornment, { formType: formType }), inputProps: {
+    const disabled = disabledUI === null || disabledUI === void 0 ? void 0 : disabledUI.includes(DisabledUI.FromAmount);
+    return (_jsxs(Card, { children: [_jsx(CardTitle, { children: t('swap.fromAmount') }), _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(Input, { inputRef: ref, size: "small", autoComplete: "off", placeholder: "0", startAdornment: isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain, sx: { marginLeft: 2 } })) : null, endAdornment: !disabled ? _jsx(SwapInputAdornment, { formType: formType }) : undefined, inputProps: {
                             inputMode: 'decimal',
-                        }, onChange: handleChange, onBlur: handleBlur, value: amount, name: amountKey, required: true }), _jsx(FormPriceHelperText, { selected: isSelected, formType: formType })] }))] }));
+                        }, onChange: handleChange, onBlur: handleBlur, value: amount, name: amountKey, disabled: disabled, required: true }), _jsx(FormPriceHelperText, { selected: isSelected, formType: formType })] }))] }));
 };

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

@@ -4,7 +4,7 @@ export declare const minInputFontSize = 14;
 export declare const FormControl: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
-    color?: "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/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/components/SwapRouteCard/SwapRouteCard.js

@@ -14,6 +14,7 @@ import { AccessTime as AccessTimeIcon, EvStationOutlined as EvStationIcon, Expan
 import { Box, Collapse, Tooltip, Typography } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useWidgetConfig } from '../../providers';
 import { Card } from '../Card';
 import { StepActions } from '../StepActions';
 import { Token } from '../Token';
@@ -23,6 +24,7 @@ export const SwapRouteCard = (_a) => {
     var _b;
     var { route, active, variant = 'default', expanded } = _a, other = __rest(_a, ["route", "active", "variant", "expanded"]);
     const { t } = useTranslation();
+    const { variant: widgetVariant, useRecommendedRoute } = useWidgetConfig();
     const [cardExpanded, setCardExpanded] = useState(variant === 'default' || expanded);
     const alternativeTag = t(`swap.tags.ALTERNATIVE`);
     const label = ((_b = route.tags) === null || _b === void 0 ? void 0 : _b.length)
@@ -32,7 +34,7 @@ export const SwapRouteCard = (_a) => {
         e.stopPropagation();
         setCardExpanded((expanded) => !expanded);
     };
-    return (_jsxs(Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route })) : null] })), _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'stretched' ? route.steps[0] : undefined }), variant === 'stretched' && !expanded ? (_jsx(IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }))) : null] })), _jsx(Collapse, Object.assign({ timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true }, { children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
+    return (_jsxs(Card, Object.assign({ dense: variant === 'dense', variant: active ? 'selected' : 'default', selectionColor: "secondary", indented: true }, other, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? (_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })), variant === 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route })) : null] }))) : null, _jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), step: variant === 'stretched' ? route.steps[0] : undefined }), variant === 'stretched' && !expanded ? (_jsx(IconButton, Object.assign({ onClick: handleExpand, size: "small" }, { children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }))) : null] })), _jsx(Collapse, Object.assign({ timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true }, { children: route.steps.map((step) => (_jsx(StepActions, { step: step, mt: 2 }, step.id))) })), variant !== 'stretched' ? (_jsx(SwapRouteCardEssentials, { route: route, dense: true })) : null] })));
 };
 export const SwapRouteCardEssentials = ({ route, dense }) => {
     var _a;
@@ -44,8 +46,8 @@ export const SwapRouteCardEssentials = ({ route, dense }) => {
     const gasCosts = getGasCostsBreakdown(route);
     return (_jsxs(Box, Object.assign({ display: "flex", justifyContent: dense ? 'space-between' : 'flex-end', flex: 1, pl: dense ? 0 : 2, mt: dense ? 2 : 0 }, { children: [_jsx(Tooltip, Object.assign({ title: _jsxs(Box, Object.assign({ component: "span" }, { children: [t(`tooltip.estimatedNetworkFee`), gasCosts.map((gas) => {
                             var _a;
-                            return (_jsxs(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: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(EvStationIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`swap.currency`, { value: gasCostUSD }) }))] })) })), _jsx(Tooltip, Object.assign({ title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t('swap.estimatedTime', {
+                            return (_jsxs(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: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(EvStationIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t(`format.currency`, { value: gasCostUSD }) }))] })) })), _jsx(Tooltip, Object.assign({ title: t(`tooltip.estimatedTime`), placement: "top", enterDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", mr: dense ? 0 : 2 }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(AccessTimeIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: t('swap.estimatedTime', {
                                 value: executionTimeMinutes,
                             }) }))] })) })), !dense ? (_jsx(Tooltip, Object.assign({ title: t(`tooltip.numberOfSteps`), placement: "top", enterDelay: 400, arrow: true }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Typography, Object.assign({ lineHeight: 0, mr: 0.5, color: "grey.500" }, { children: _jsx(LayersIcon, { fontSize: dense ? 'medium' : 'small' }) })), _jsx(Typography, Object.assign({ fontSize: 14, color: "text.primary", fontWeight: "500", lineHeight: 1 }, { children: route.steps.length }))] })) }))) : null] })));
 };

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

@@ -17,7 +17,7 @@ export declare const Label: import("@emotion/styled").StyledComponent<import("@m
 export declare const IconButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "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/components/SwapRouteCard/SwapRouteCardSkeleton.js

@@ -11,8 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Skeleton } from '@mui/material';
+import { useWidgetConfig } from '../../providers';
 import { Card } from '../Card';
 export const SwapRouteCardSkeleton = (_a) => {
     var { variant } = _a, other = __rest(_a, ["variant"]);
-    return (_jsxs(Card, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center" }, { children: [_jsx(Skeleton, { variant: "rectangular", width: 118, height: 24, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? (_jsxs(Box, Object.assign({ display: "flex" }, { children: [_jsx(Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), _jsx(Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), _jsx(Skeleton, { variant: "text", width: 32, height: 24 })] }))) : null] })), _jsxs(Box, Object.assign({ mt: 2 }, { children: [_jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Box, Object.assign({ mr: 2 }, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) })), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] })), _jsxs(Box, Object.assign({ ml: 6, display: "flex", alignItems: "center" }, { children: [_jsx(Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? (_jsx(Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] }))] })), variant !== 'stretched' ? (_jsxs(Box, Object.assign({ mt: 2, display: "flex", justifyContent: "space-between" }, { children: [_jsx(Skeleton, { variant: "text", width: 48, height: 24 }), _jsx(Skeleton, { variant: "text", width: 48, height: 24 })] }))) : null] })));
+    const { variant: widgetVariant, useRecommendedRoute } = useWidgetConfig();
+    return (_jsxs(Card, Object.assign({ dense: variant === 'dense', indented: true }, other, { children: [widgetVariant !== 'refuel' && !useRecommendedRoute ? (_jsxs(Box, Object.assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 }, { children: [_jsx(Skeleton, { variant: "rectangular", width: 118, height: 24, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? (_jsxs(Box, Object.assign({ display: "flex" }, { children: [_jsx(Skeleton, { variant: "text", width: 52, height: 24, sx: { marginRight: 2 } }), _jsx(Skeleton, { variant: "text", width: 44, height: 24, sx: { marginRight: 2 } }), _jsx(Skeleton, { variant: "text", width: 32, height: 24 })] }))) : null] }))) : null, _jsxs(Box, { children: [_jsxs(Box, Object.assign({ display: "flex", alignItems: "center" }, { children: [_jsx(Box, Object.assign({ mr: 2 }, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32 }) })), _jsx(Skeleton, { variant: "text", width: 96, height: 32 })] })), _jsxs(Box, Object.assign({ ml: 6, display: "flex", alignItems: "center" }, { children: [_jsx(Skeleton, { variant: "text", width: 102, height: 16, sx: { borderRadius: 0.5 } }), variant === 'stretched' ? (_jsx(Skeleton, { variant: "text", width: 72, height: 16, sx: { marginLeft: 1 } })) : null] }))] }), variant !== 'stretched' ? (_jsxs(Box, Object.assign({ mt: 2, display: "flex", justifyContent: "space-between" }, { children: [_jsx(Skeleton, { variant: "text", width: 48, height: 24 }), _jsx(Skeleton, { variant: "text", width: 48, height: 24 })] }))) : null] })));
 };

package/components/SwapRoutes/SwapRoutes.js

@@ -8,11 +8,13 @@ import { Card, CardTitle } from '../../components/Card';
 import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate';
 import { SwapRouteCard, SwapRouteCardSkeleton, SwapRouteNotFoundCard, } from '../../components/SwapRouteCard';
 import { useSwapRoutes } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
 import { Stack } from './SwapRoutes.style';
 import { useSetRecommendedRoute } from './useSetRecommendedRoute';
 export const SwapRoutes = (props) => {
     const { t } = useTranslation();
+    const { variant, useRecommendedRoute } = useWidgetConfig();
     const navigate = useNavigate();
     const { isValid, isValidating } = useFormState();
     const { routes, isLoading, isFetching, isFetched, dataUpdatedAt, refetchTime, refetch, } = useSwapRoutes();
@@ -25,13 +27,16 @@ export const SwapRoutes = (props) => {
         navigate(navigationRoutes.swapRoutes);
     };
     const routeNotFound = !currentRoute && !isLoading && !isFetching;
+    const onlyRecommendedRoute = variant === 'refuel' || useRecommendedRoute;
     return (_jsxs(Card, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.routes') }), _jsx(ProgressToNextUpdate, { updatedAt: dataUpdatedAt || new Date().getTime(), timeToUpdate: refetchTime, isLoading: isFetching, onClick: () => refetch(), sx: {
                     position: 'absolute',
                     top: 8,
                     right: 8,
-                } }), _jsxs(Box, Object.assign({ sx: { display: 'flex' } }, { children: [_jsx(Stack, Object.assign({ direction: "row", spacing: 2, my: 2, ml: 2, mr: routeNotFound ? 2 : 1, sx: {
-                            borderRightWidth: !routeNotFound && (isFetching || (routes && routes.length > 1))
+                } }), _jsxs(Box, Object.assign({ sx: { display: 'flex' } }, { children: [_jsx(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 ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" }), _jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, {})) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense", pointerEvents: "none" })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })));
+                        } }, { children: isLoading || isFetching ? (_jsxs(_Fragment, { children: [_jsx(SwapRouteCardSkeleton, { minWidth: !onlyRecommendedRoute ? '80%' : '100%', variant: "dense" }), !onlyRecommendedRoute ? (_jsx(SwapRouteCardSkeleton, { minWidth: "80%", variant: "dense" })) : null] })) : !currentRoute ? (_jsx(SwapRouteNotFoundCard, {})) : (_jsxs(_Fragment, { children: [_jsx(SwapRouteCard, { minWidth: !onlyRecommendedRoute && routes.length > 1 ? '80%' : '100%', route: currentRoute, variant: "dense", active: true }), !onlyRecommendedRoute && routes.length > 1 ? (_jsx(SwapRouteCard, { minWidth: "80%", route: routes[1], variant: "dense", pointerEvents: "none" })) : null] })) })), _jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: !onlyRecommendedRoute && !routeNotFound ? (_jsx(Box, Object.assign({ py: 1, pr: 1 }, { children: _jsx(IconButton, Object.assign({ onClick: handleCardClick, size: "medium", disabled: isValidating || !isValid }, { children: _jsx(KeyboardArrowRightIcon, {}) })) }))) : null }))] }))] })));
 };

package/components/Token/Token.js

@@ -12,22 +12,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useChains } from '../../hooks';
+import { useChain } from '../../hooks';
 import { formatTokenAmount } from '../../utils';
 import { SmallAvatar } from '../SmallAvatar';
 import { TextFitter } from '../TextFitter';
 import { TokenAvatar } from '../TokenAvatar';
 import { TextSecondary, TextSecondaryContainer } from './Token.style';
 export const Token = (_a) => {
-    var _b;
     var { token, connected, step } = _a, other = __rest(_a, ["token", "connected", "step"]);
     const { t } = useTranslation();
-    const { getChainById } = useChains();
-    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [_jsx(TokenAvatar, { token: token, sx: { marginRight: 2 } }), _jsx(TextFitter, Object.assign({ height: 30, textStyle: {
+    const { chain } = useChain(token.chainId);
+    return (_jsxs(Box, Object.assign({ flex: 1 }, other, { children: [_jsxs(Box, Object.assign({ display: "flex", flex: 1, alignItems: "center" }, { children: [_jsx(TokenAvatar, { token: token, chain: chain, sx: { marginRight: 2 } }), _jsx(TextFitter, Object.assign({ height: 30, textStyle: {
                             fontWeight: 700,
-                        } }, { children: formatTokenAmount(token.amount, token.decimals) }))] })), _jsxs(TextSecondaryContainer, Object.assign({ connected: connected, component: "span" }, { children: [_jsx(TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
+                        } }, { children: t('format.number', {
+                            value: formatTokenAmount(token.amount, token.decimals),
+                        }) }))] })), _jsxs(TextSecondaryContainer, Object.assign({ connected: connected, component: "span" }, { children: [_jsx(TextSecondary, Object.assign({ connected: connected }, { children: t(`swap.tokenOnChain`, {
                             tokenSymbol: token.symbol,
-                            chainName: (_b = getChainById(token.chainId)) === null || _b === void 0 ? void 0 : _b.name,
+                            chainName: chain === null || chain === void 0 ? void 0 : chain.name,
                         }) })), step ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ fontSize: 12, lineHeight: 1, fontWeight: 500, color: "text.secondary", px: 1, mt: 0.5 }, { children: "\u2022" })), _jsxs(Box, Object.assign({ display: "flex", alignItems: "flex-end", height: 12, mt: 0.5 }, { children: [_jsx(Box, Object.assign({ pr: 0.75 }, { children: _jsx(SmallAvatar, Object.assign({ src: step.toolDetails.logoURI, alt: step.toolDetails.name, sx: {
                                                 border: 0,
                                                 marginBottom: -0.25,

package/components/TokenAvatar/TokenAvatar.d.ts

@@ -1,7 +1,17 @@
 /// <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 TokenAvatarBase: React.FC<{
+    token: Token;
+    chain?: Chain;
+    sx?: SxProps<Theme>;
+}>;
 export declare const TokenAvatar: React.FC<{
     token: Token;
+    chain?: Chain;
     sx?: SxProps<Theme>;
 }>;

package/components/TokenAvatar/TokenAvatar.js

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

package/components/TokenList/TokenList.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-import { useCallback, useRef } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { useRef } from 'react';
+import { useWatch } from 'react-hook-form';
 import { useDebouncedWatch, useTokenBalances, useTokenSearch, } from '../../hooks';
 import { SwapFormKey, SwapFormKeyHelper, useWallet } from '../../providers';
 import { TokenNotFound } from './TokenNotFound';
+import { useTokenSelect } from './useTokenSelect';
 import { VirtualizedTokenList } from './VirtualizedTokenList';
 export const TokenList = ({ formType, height, onClick, }) => {
     var _a, _b;
     const parentRef = useRef(null);
     const { account } = useWallet();
-    const { setValue, getValues } = useFormContext();
     const [selectedChainId] = useWatch({
         name: [SwapFormKeyHelper.getChainKey(formType)],
     });
@@ -34,27 +34,6 @@ export const TokenList = ({ formType, height, onClick, }) => {
         : searchedToken
             ? [searchedToken]
             : filteredTokens;
-    const handleTokenClick = useCallback((tokenAddress) => {
-        setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress, {
-            shouldTouch: true,
-        });
-        // Set chain again to trigger URL builder update
-        setValue(SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
-            shouldTouch: true,
-        });
-        setValue(SwapFormKeyHelper.getAmountKey(formType), '');
-        const oppositeFormType = formType === 'from' ? 'to' : 'from';
-        const [selectedOppositeToken, selectedOppositeChainId] = getValues([
-            SwapFormKeyHelper.getTokenKey(oppositeFormType),
-            SwapFormKeyHelper.getChainKey(oppositeFormType),
-        ]);
-        if (selectedOppositeToken === tokenAddress &&
-            selectedOppositeChainId === selectedChainId) {
-            setValue(SwapFormKeyHelper.getTokenKey(oppositeFormType), '', {
-                shouldTouch: true,
-            });
-        }
-        onClick === null || onClick === void 0 ? void 0 : onClick();
-    }, [formType, getValues, onClick, selectedChainId, setValue]);
+    const handleTokenClick = useTokenSelect(formType, onClick);
     return (_jsxs(Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? (_jsx(TokenNotFound, { formType: formType })) : null, _jsx(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 })] })));
 };

package/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/components/TokenList/TokenListItem.js

@@ -5,16 +5,21 @@ import { useTranslation } from 'react-i18next';
 import { formatTokenPrice } from '../../utils';
 import { ListItem, ListItemButton } from './TokenList.style';
 export const TokenListItem = memo(({ onClick, size, start, token, showBalance, isBalanceLoading, startAdornment, endAdornment, }) => {
-    const { t } = useTranslation();
     const handleClick = () => onClick === null || onClick === void 0 ? void 0 : onClick(token.address);
-    const tokenPrice = formatTokenPrice(token.amount, token.priceUSD);
     return (_jsxs(ListItem, Object.assign({ disablePadding: true, style: {
             height: `${size}px`,
             transform: `translateY(${start}px)`,
-        } }, { children: [startAdornment, _jsxs(ListItemButton, Object.assign({ onClick: handleClick, dense: true, disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] })) }), _jsx(ListItemText, { primary: token.symbol, secondary: token.name }), showBalance ? (isBalanceLoading ? (_jsx(TokenAmountSkeleton, {})) : (_jsxs(Box, Object.assign({ sx: { textAlign: 'right' } }, { children: [Number(token.amount) ? (_jsx(Typography, Object.assign({ variant: "body1", noWrap: true }, { children: token.amount }))) : null, tokenPrice ? (_jsx(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, _jsx(TokenListItemButton, { token: token, showBalance: showBalance, isBalanceLoading: isBalanceLoading, onClick: handleClick }), endAdornment] })));
 });
+export const TokenListItemButton = ({ onClick, token, showBalance, isBalanceLoading, }) => {
+    const { t } = useTranslation();
+    const tokenPrice = formatTokenPrice(token.amount, token.priceUSD);
+    return (_jsxs(ListItemButton, Object.assign({ onClick: onClick, dense: true, disableRipple: true }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: token.logoURI, alt: token.symbol }, { children: token.symbol[0] })) }), _jsx(ListItemText, { primary: token.symbol, secondary: token.name }), showBalance ? (isBalanceLoading ? (_jsx(TokenAmountSkeleton, {})) : (_jsxs(Box, Object.assign({ sx: { textAlign: 'right' } }, { children: [Number(token.amount) ? (_jsx(Typography, Object.assign({ variant: "body1", noWrap: true }, { children: t('format.number', {
+                            value: token.amount,
+                        }) }))) : null, tokenPrice ? (_jsx(Typography, Object.assign({ fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD }, { children: t(`format.currency`, {
+                            value: tokenPrice,
+                        }) }))) : null] })))) : null] })));
+};
 export const TokenListItemSkeleton = () => {
     return (_jsxs(ListItem, Object.assign({ secondaryAction: _jsx(TokenAmountSkeleton, {}), disablePadding: true, sx: { position: 'relative', flexDirection: 'row', alignItems: 'center' } }, { children: [_jsx(ListItemAvatar, { children: _jsx(Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 1.5, marginRight: 2 } }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: 48, height: 20 }), secondary: _jsx(Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
 };

package/components/TokenList/index.d.ts

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

package/components/TokenList/index.js

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

package/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/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/components/TokenList/useTokenSelect.js

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { SwapFormKeyHelper } from '../../providers';
+export const useTokenSelect = (formType, onClick) => {
+    const { setValue, getValues } = useFormContext();
+    return useCallback((tokenAddress, chainId) => {
+        const selectedChainId = chainId !== null && chainId !== void 0 ? chainId : getValues(SwapFormKeyHelper.getChainKey(formType));
+        setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress, {
+            shouldTouch: true,
+        });
+        // Set chain again to trigger URL builder update
+        setValue(SwapFormKeyHelper.getChainKey(formType), selectedChainId, {
+            shouldTouch: true,
+        });
+        setValue(SwapFormKeyHelper.getAmountKey(formType), '');
+        const oppositeFormType = formType === 'from' ? 'to' : 'from';
+        const [selectedOppositeToken, selectedOppositeChainId] = getValues([
+            SwapFormKeyHelper.getTokenKey(oppositeFormType),
+            SwapFormKeyHelper.getChainKey(oppositeFormType),
+        ]);
+        if (selectedOppositeToken === tokenAddress &&
+            selectedOppositeChainId === selectedChainId) {
+            setValue(SwapFormKeyHelper.getTokenKey(oppositeFormType), '', {
+                shouldTouch: true,
+            });
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    }, [formType, getValues, onClick, setValue]);
+};

package/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.1";

package/config/version.js

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

package/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/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/hooks/useExpandableVariant.js

@@ -2,9 +2,7 @@ import { useMediaQuery } from '@mui/material';
 import { useWidgetConfig } from '../providers';
 const defaultExpandableWidth = 852;
 export const useExpandableVariant = () => {
-    const { variant } = useWidgetConfig();
-    const expandableAllowed = useMediaQuery((theme) => {
-        return theme.breakpoints.up(defaultExpandableWidth);
-    });
-    return variant === 'expandable' && expandableAllowed;
+    const { variant, useRecommendedRoute } = useWidgetConfig();
+    const expandableAllowed = useMediaQuery((theme) => theme.breakpoints.up(defaultExpandableWidth));
+    return variant === 'expandable' && expandableAllowed && !useRecommendedRoute;
 };

package/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;
 };