@lifi/widget 2.0.0-beta.6 → 2.0.0-beta.8

package/App.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
-import type { WidgetProps } from './types';
-export declare const App: React.FC<WidgetProps>;
-export declare const AppDefault: () => JSX.Element;
+import type { WidgetDrawer } from './AppDrawer';
+import type { WidgetConfig } from './types';
+export declare const App: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & WidgetConfig & import("./types").WidgetConfigPartialProps & import("react").RefAttributes<WidgetDrawer>>;
+export declare const AppDefault: () => import("react/jsx-runtime").JSX.Element;

package/AppDrawer.d.ts

@@ -9,4 +9,4 @@ export interface WidgetDrawer {
 export declare const AppDrawer: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & WidgetConfig & import("./types").WidgetConfigPartialProps & import("react").RefAttributes<WidgetDrawer>>;
 export declare const DrawerButtonText: ({ open }: {
     open: boolean;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/cjs/App.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
-import type { WidgetProps } from './types';
-export declare const App: React.FC<WidgetProps>;
-export declare const AppDefault: () => JSX.Element;
+import type { WidgetDrawer } from './AppDrawer';
+import type { WidgetConfig } from './types';
+export declare const App: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & WidgetConfig & import("./types").WidgetConfigPartialProps & import("react").RefAttributes<WidgetDrawer>>;
+export declare const AppDefault: () => import("react/jsx-runtime").JSX.Element;

package/cjs/AppDrawer.d.ts

@@ -9,4 +9,4 @@ export interface WidgetDrawer {
 export declare const AppDrawer: import("react").ForwardRefExoticComponent<import("./types").WidgetDrawerProps & WidgetConfig & import("./types").WidgetConfigPartialProps & import("react").RefAttributes<WidgetDrawer>>;
 export declare const DrawerButtonText: ({ open }: {
     open: boolean;
-}) => JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/cjs/components/ChainSelect/ChainSelect.d.ts

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

package/cjs/components/GasMessage/FundsSufficiencyMessage.d.ts

@@ -1 +1 @@
-export declare const FundsSufficiencyMessage: () => JSX.Element;
+export declare const FundsSufficiencyMessage: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,20 @@
 /// <reference types="react" />
-export declare const HeaderAppBar: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").PaperProps, "classes" | "color" | "position"> & {
+export declare const HeaderAppBar: import("@emotion/styled").StyledComponent<{
     classes?: Partial<import("@mui/material").AppBarClasses> | undefined;
     color?: import("@mui/types").OverridableStringUnion<"transparent" | import("@mui/material").PropTypes.Color, import("@mui/material").AppBarPropsColorOverrides> | undefined;
     enableColorOnDark?: boolean | undefined;
     position?: "fixed" | "absolute" | "relative" | "static" | "sticky" | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+} & Omit<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").PaperClasses> | undefined;
+    elevation?: number | undefined;
+    square?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: import("@mui/types").OverridableStringUnion<"outlined" | "elevation", import("@mui/material").PaperPropsVariantOverrides> | undefined;
+}, "classes" | "color" | "position"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "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" | "ref" | "key" | "position" | "variant" | "square" | "elevation" | "enableColorOnDark"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "position" | "variant" | "square" | "elevation" | "enableColorOnDark"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;

package/cjs/components/Header/NavigationHeader.js

@@ -18,7 +18,7 @@ const WalletHeader_1 = require("./WalletHeader");
 const useHeaderActionStore_1 = require("./useHeaderActionStore");
 const NavigationHeader = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { variant, subvariant, hiddenUI, walletManagement } = (0, providers_1.useWidgetConfig)();
+    const { variant, subvariant, hiddenUI } = (0, providers_1.useWidgetConfig)();
     const { navigate, navigateBack } = (0, hooks_1.useNavigateBack)();
     const { account } = (0, providers_1.useWallet)();
     const { element } = (0, useHeaderActionStore_1.useHeaderActionStore)();

package/cjs/components/Header/NavigationTabs.d.ts

@@ -1 +1 @@
-export declare const NavigationTabs: () => JSX.Element;
+export declare const NavigationTabs: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,75 +1,8 @@
 /// <reference types="react" />
-export declare const NavbarTabs: import("@emotion/styled").StyledComponent<{
-    action?: import("react").Ref<import("@mui/material").TabsActions> | undefined;
-    allowScrollButtonsMobile?: boolean | undefined;
-    'aria-label'?: string | undefined;
-    'aria-labelledby'?: string | undefined;
-    centered?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").TabsClasses> | undefined;
-    slots?: {
-        StartScrollButtonIcon?: import("react").ElementType<any> | undefined;
-        EndScrollButtonIcon?: import("react").ElementType<any> | undefined;
-    } | undefined;
-    slotProps?: {
-        startScrollButtonIcon?: import("@mui/base").SlotComponentProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-            muiName: string;
-        }, import("@mui/material").TabsStartScrollButtonIconSlotPropsOverrides, import("@mui/material").TabsOwnerState> | undefined;
-        endScrollButtonIcon?: import("@mui/base").SlotComponentProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-            muiName: string;
-        }, import("@mui/material").TabsEndScrollButtonIconSlotPropsOverrides, import("@mui/material").TabsOwnerState> | undefined;
-    } | undefined;
-    indicatorColor?: import("@mui/types").OverridableStringUnion<"primary" | "secondary", import("@mui/material").TabsPropsIndicatorColorOverrides> | undefined;
-    onChange?: ((event: import("react").SyntheticEvent<Element, Event>, value: any) => void) | undefined;
-    orientation?: "horizontal" | "vertical" | undefined;
-    ScrollButtonComponent?: import("react").ElementType<any> | undefined;
-    scrollButtons?: boolean | "auto" | undefined;
-    selectionFollowsFocus?: boolean | undefined;
-    TabIndicatorProps?: (import("react").HTMLAttributes<HTMLDivElement> & {
-        sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    }) | undefined;
-    TabScrollButtonProps?: Partial<import("@mui/material").TabScrollButtonProps> | undefined;
-    textColor?: "inherit" | "primary" | "secondary" | undefined;
-    value?: any;
-    variant?: "fullWidth" | "standard" | "scrollable" | undefined;
-    visibleScrollbar?: boolean | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef">, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "aria-label" | "aria-labelledby" | "onChange" | "action" | "sx" | "variant" | "value" | "slotProps" | "slots" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const NavbarTab: import("@emotion/styled").StyledComponent<{
+import type { StyledComponent } from '@emotion/styled';
+import type { TabsProps } from '@mui/material';
+export declare const NavbarTabs: StyledComponent<TabsProps>;
+export declare const NavbarTab: StyledComponent<{
     children?: null | undefined;
     classes?: Partial<import("@mui/material").TabClasses> | undefined;
     disabled?: boolean | undefined;

package/cjs/components/Header/WalletHeader.js

@@ -47,7 +47,7 @@ const ConnectedButton = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { subvariant } = (0, providers_1.useWidgetConfig)();
     const { account, disconnect } = (0, providers_1.useWallet)();
-    const walletAddress = (0, utils_1.shortenWalletAddress)(account.address);
+    const walletAddress = (0, utils_1.shortenAddress)(account.address);
     const { chain } = (0, hooks_1.useChain)(account.chainId);
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const handleClick = (event) => {

package/cjs/components/SelectChainAndToken.js

@@ -10,7 +10,7 @@ const providers_1 = require("../providers");
 const types_1 = require("../types");
 const SelectChainAndToken = (props) => {
     const prefersNarrowView = (0, material_1.useMediaQuery)((theme) => theme.breakpoints.down('sm'));
-    const { disabledUI, variant } = (0, providers_1.useWidgetConfig)();
+    const { disabledUI, hiddenUI, variant } = (0, providers_1.useWidgetConfig)();
     const [fromChain, toChain, fromToken, toToken] = (0, react_hook_form_1.useWatch)({
         name: [
             providers_1.SwapFormKey.FromChain,
@@ -19,20 +19,21 @@ const SelectChainAndToken = (props) => {
             providers_1.SwapFormKey.ToToken,
         ],
     });
-    const disabledReverse = variant === 'refuel' ||
+    const hiddenReverse = variant === 'refuel' ||
         disabledUI?.includes(types_1.DisabledUI.FromToken) ||
-        disabledUI?.includes(types_1.DisabledUI.ToToken);
-    const nftVariant = variant === 'nft';
+        disabledUI?.includes(types_1.DisabledUI.ToToken) ||
+        hiddenUI?.includes(types_1.HiddenUI.ToToken);
+    const hiddenToToken = variant === 'nft' || hiddenUI?.includes(types_1.HiddenUI.ToToken);
     const isCompact = fromChain &&
         toChain &&
         fromToken &&
         toToken &&
         !prefersNarrowView &&
-        !nftVariant;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' }, ...props, children: [(0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "from", compact: isCompact }), !nftVariant ? ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+        !hiddenToToken;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' }, ...props, children: [(0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "from", compact: isCompact }), !hiddenToToken ? ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
-                }, m: !disabledReverse ? -1.125 : 1, children: !disabledReverse ? ((0, jsx_runtime_1.jsx)(ReverseTokensButton_1.ReverseTokensButton, { vertical: !isCompact })) : null })) : null, !nftVariant ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "to", compact: isCompact })) : null] }));
+                }, m: !hiddenReverse ? -1.125 : 1, children: !hiddenReverse ? ((0, jsx_runtime_1.jsx)(ReverseTokensButton_1.ReverseTokensButton, { vertical: !isCompact })) : null })) : null, !hiddenToToken ? ((0, jsx_runtime_1.jsx)(SelectTokenButton_1.SelectTokenButton, { formType: "to", compact: isCompact })) : null] }));
 };
 exports.SelectChainAndToken = SelectChainAndToken;

package/cjs/components/SendToWallet/SendToWallet.js

@@ -15,7 +15,7 @@ const SendToWallet_style_1 = require("./SendToWallet.style");
 exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { trigger, getValues, clearErrors } = (0, react_hook_form_1.useFormContext)();
-    const { account, provider } = (0, providers_1.useWallet)();
+    const { account } = (0, providers_1.useWallet)();
     const { disabledUI, hiddenUI, requiredUI, toAddress } = (0, providers_1.useWidgetConfig)();
     const { showSendToWallet, showSendToWalletDirty, setSendToWallet } = (0, stores_1.useSendToWalletStore)();
     const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
@@ -33,7 +33,7 @@ exports.SendToWallet = (0, react_1.forwardRef)((props, ref) => {
                     if (!value) {
                         return true;
                     }
-                    const address = await provider?.resolveName(value);
+                    const address = await account.signer?.provider?.resolveName(value);
                     return ((0, address_1.isAddress)(address || value) ||
                         t('swap.error.title.walletAddressInvalid'));
                 }

package/cjs/components/SmallAvatar.d.ts

@@ -33,4 +33,4 @@ export declare const SmallAvatarSkeletonContainer: import("@emotion/styled").Sty
 } & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const SmallAvatarSkeleton: () => JSX.Element;
+export declare const SmallAvatarSkeleton: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
 import type { Process } from '@lifi/sdk';
 export declare function CircularProgress({ process }: {
     process: Process;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/cjs/components/Step/Step.js

@@ -43,7 +43,7 @@ const Step = ({ step, fromToken, toToken, toAddress }) => {
                     : t('swap.stepSwap');
         }
     };
-    const formattedToAddress = (0, utils_1.shortenWalletAddress)(toAddress);
+    const formattedToAddress = (0, utils_1.shortenAddress)(toAddress);
     const toAddressLink = toAddress
         ? `${getChainById(step.action.toChainId)?.metamask.blockExplorerUrls[0]}address/${toAddress}`
         : undefined;

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

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

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

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

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

@@ -1,2 +1,2 @@
-export declare const SwapRoutesExpanded: () => JSX.Element;
-export declare const SwapRoutesExpandedElement: () => JSX.Element;
+export declare const SwapRoutesExpanded: () => import("react/jsx-runtime").JSX.Element;
+export declare const SwapRoutesExpandedElement: () => import("react/jsx-runtime").JSX.Element;

package/cjs/components/TokenList/TokenList.js

@@ -17,6 +17,7 @@ const TokenList = ({ formType, height, onClick, }) => {
         name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
     });
     const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([providers_1.SwapFormKey.TokenSearchFilter], 320);
+    const { chain, isLoading: isChainLoading } = (0, hooks_1.useChain)(selectedChainId);
     const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = (0, hooks_1.useTokenBalances)(selectedChainId);
     let filteredTokens = (tokensWithBalance ??
         chainTokens ??
@@ -32,13 +33,15 @@ const TokenList = ({ formType, height, onClick, }) => {
         !!tokenSearchFilter &&
         !!selectedChainId;
     const { token: searchedToken, isLoading: isSearchedTokenLoading } = (0, hooks_1.useTokenSearch)(selectedChainId, tokenSearchFilter, tokenSearchEnabled);
-    const isLoading = isTokensLoading || (tokenSearchEnabled && isSearchedTokenLoading);
+    const isLoading = isTokensLoading ||
+        isChainLoading ||
+        (tokenSearchEnabled && isSearchedTokenLoading);
     const tokens = filteredTokens.length
         ? filteredTokens
         : searchedToken
             ? [searchedToken]
             : filteredTokens;
     const handleTokenClick = (0, useTokenSelect_1.useTokenSelect)(formType, onClick);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { 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?.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { 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?.length, scrollElementRef: parentRef, chainId: selectedChainId, chain: chain, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] }));
 };
 exports.TokenList = TokenList;

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+import type { StyledComponent } from '@emotion/styled';
+import type { ButtonProps, LinkProps } from '@mui/material';
+export declare const ListItemButton: StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;
     children?: import("react").ReactNode;
@@ -18,7 +20,7 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
 }, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const ListItem: import("@emotion/styled").StyledComponent<{
+export declare const ListItem: StyledComponent<{
     button?: false | undefined;
 } & import("@mui/material").ListItemBaseProps & {
     components?: {
@@ -36,3 +38,4 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
 }, "button" | "className" | "style" | "classes" | "autoFocus" | "children" | "disabled" | "sx" | "alignItems" | "dense" | "divider" | "components" | "slotProps" | "slots" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const LinkButton: StyledComponent<ButtonProps & LinkProps>;

package/cjs/components/TokenList/TokenList.style.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListItem = exports.ListItemButton = void 0;
+exports.LinkButton = exports.ListItem = exports.ListItemButton = void 0;
 const material_1 = require("@mui/material");
 const ListItemSecondaryAction_1 = require("@mui/material/ListItemSecondaryAction");
 const ListItemText_1 = require("@mui/material/ListItemText");
@@ -29,3 +29,22 @@ exports.ListItem = (0, styles_1.styled)(material_1.ListItem)(({ theme }) => ({
         whiteSpace: 'nowrap',
     },
 }));
+exports.LinkButton = (0, styles_1.styled)(material_1.Button)(({ theme }) => ({
+    lineHeight: 1,
+    fontSize: '0.75rem',
+    fontWeight: 400,
+    padding: theme.spacing(0.375, 0.75),
+    color: 'inherit',
+    backgroundColor: 'unset',
+    '&:hover': {
+        backgroundColor: theme.palette.mode === 'light'
+            ? (0, styles_1.alpha)(theme.palette.common.black, 0.04)
+            : (0, styles_1.alpha)(theme.palette.common.white, 0.08),
+    },
+    [`.${material_1.buttonClasses.endIcon}`]: {
+        marginLeft: theme.spacing(0.25),
+    },
+    [`.${material_1.buttonClasses.endIcon} > *:nth-of-type(1)`]: {
+        fontSize: '0.75rem',
+    },
+}));

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

@@ -2,5 +2,5 @@
 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 TokenListItemSkeleton: () => import("react/jsx-runtime").JSX.Element;
 export declare const TokenAmountSkeleton: React.FC;

package/cjs/components/TokenList/TokenListItem.js

@@ -2,22 +2,45 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TokenAmountSkeleton = exports.TokenListItemSkeleton = exports.TokenListItemButton = exports.TokenListItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const OpenInNewRounded_1 = require("@mui/icons-material/OpenInNewRounded");
 const material_1 = require("@mui/material");
 const react_1 = require("react");
 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, }) => {
+exports.TokenListItem = (0, react_1.memo)(({ onClick, size, start, token, chain, showBalance, isBalanceLoading, startAdornment, endAdornment, }) => {
     const handleClick = () => onClick?.(token.address);
     return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItem, { disablePadding: true, style: {
             height: `${size}px`,
             transform: `translateY(${start}px)`,
-        }, children: [startAdornment, (0, jsx_runtime_1.jsx)(exports.TokenListItemButton, { token: token, showBalance: showBalance, isBalanceLoading: isBalanceLoading, onClick: handleClick }), endAdornment] }));
+        }, children: [startAdornment, (0, jsx_runtime_1.jsx)(exports.TokenListItemButton, { token: token, chain: chain, showBalance: showBalance, isBalanceLoading: isBalanceLoading, onClick: handleClick }), endAdornment] }));
 });
-const TokenListItemButton = ({ onClick, token, showBalance, isBalanceLoading, }) => {
+const TokenListItemButton = ({ onClick, token, chain, 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, { onClick: onClick, dense: true, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { 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, { sx: { textAlign: 'right' }, children: [Number(token.amount) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", noWrap: true, children: t('format.number', {
+    const container = (0, react_1.useRef)(null);
+    const timeoutId = (0, react_1.useRef)();
+    const [showAddress, setShowAddress] = (0, react_1.useState)(false);
+    const onMouseEnter = () => {
+        timeoutId.current = setTimeout(() => setShowAddress(true), 350);
+    };
+    const onMouseLeave = () => {
+        clearTimeout(timeoutId.current);
+        if (showAddress) {
+            setShowAddress(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItemButton, { onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, dense: true, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: token.logoURI, alt: token.symbol, children: token.symbol[0] }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: token.symbol, secondaryTypographyProps: {
+                    component: 'div',
+                    sx: {
+                        overflow: 'auto',
+                        marginLeft: -0.75,
+                    },
+                }, secondary: (0, jsx_runtime_1.jsxs)(material_1.Box, { position: "relative", height: 18, ref: container, children: [(0, jsx_runtime_1.jsx)(material_1.Slide, { direction: "down", in: !showAddress, container: container.current, style: {
+                                position: 'absolute',
+                            }, appear: false, children: (0, jsx_runtime_1.jsx)(material_1.Box, { pl: 0.75, children: token.name }) }), (0, jsx_runtime_1.jsx)(material_1.Slide, { direction: "up", in: showAddress, container: container.current, style: {
+                                position: 'absolute',
+                            }, appear: false, mountOnEnter: true, children: (0, jsx_runtime_1.jsx)(TokenList_style_1.LinkButton, { size: "small", LinkComponent: material_1.Link, href: `${chain?.metamask.blockExplorerUrls[0]}address/${token.address}`, target: "_blank", rel: "nofollow noreferrer", onClick: (e) => e.stopPropagation(), endIcon: (0, jsx_runtime_1.jsx)(OpenInNewRounded_1.default, {}), children: (0, utils_1.shortenAddress)(token.address) }) })] }) }), showBalance ? (isBalanceLoading ? ((0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { textAlign: 'right' }, children: [Number(token.amount) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", noWrap: true, children: t('format.number', {
                             value: token.amount,
                         }) })) : null, tokenPrice ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", "data-price": token.priceUSD, children: t(`format.currency`, {
                             value: tokenPrice,

package/cjs/components/TokenList/VirtualizedTokenList.js

@@ -7,7 +7,7 @@ const react_virtual_1 = require("@tanstack/react-virtual");
 const react_1 = require("react");
 const react_i18next_1 = require("react-i18next");
 const TokenListItem_1 = require("./TokenListItem");
-const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef, chainId, isLoading, isBalanceLoading, showBalance, showFeatured, onClick, }) => {
+const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef, chainId, chain, isLoading, isBalanceLoading, showBalance, showFeatured, onClick, }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const hasFeaturedTokens = !!featuredTokensLength && showFeatured;
     const featuredTokensLastIndex = (featuredTokensLength ?? 0) - 1;
@@ -35,7 +35,7 @@ const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef,
             }
             return size;
         },
-        getItemKey: (index) => tokens[index].address ?? index,
+        getItemKey: (index) => `${tokens[index].address}-${index}`,
     });
     (0, react_1.useEffect)(() => {
         if (getVirtualItems().length) {
@@ -49,7 +49,7 @@ const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef,
     }
     return ((0, jsx_runtime_1.jsx)(material_1.List, { style: { height: getTotalSize() }, disablePadding: true, children: getVirtualItems().map((item) => {
             const token = tokens[item.index];
-            return ((0, jsx_runtime_1.jsx)(TokenListItem_1.TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, pb: 1.25, children: t('swap.featuredTokens') })) : null, endAdornment: hasFeaturedTokens &&
+            return ((0, jsx_runtime_1.jsx)(TokenListItem_1.TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: token, chain: chain, isBalanceLoading: isBalanceLoading, showBalance: showBalance, startAdornment: hasFeaturedTokens && token.featured && item.index === 0 ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, pb: 1.25, children: t('swap.featuredTokens') })) : null, endAdornment: hasFeaturedTokens &&
                     token.featured &&
                     item.index === featuredTokensLastIndex &&
                     item.index !== tokensLastIndex ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, fontWeight: 600, lineHeight: 1, px: 2, py: 1.25, children: t('swap.otherTokens') })) : null }, item.key));

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

@@ -1,3 +1,4 @@
+import type { ExtendedChain } from '@lifi/sdk';
 import type { MutableRefObject } from 'react';
 import type { SwapFormType } from '../../providers';
 import type { TokenAmount } from '../../types';
@@ -13,6 +14,7 @@ export interface VirtualizedTokenListProps {
     isLoading: boolean;
     isBalanceLoading: boolean;
     chainId: number;
+    chain?: ExtendedChain;
     showBalance?: boolean;
     showFeatured?: boolean;
     onClick(tokenAddress: string): void;
@@ -25,6 +27,7 @@ export interface TokenListItemBaseProps {
 export interface TokenListItemProps extends TokenListItemBaseProps {
     showBalance?: boolean;
     token: TokenAmount;
+    chain?: ExtendedChain;
     isBalanceLoading?: boolean;
     startAdornment?: React.ReactNode;
     endAdornment?: React.ReactNode;
@@ -33,5 +36,6 @@ export interface TokenListItemButtonProps {
     onClick?(): void;
     showBalance?: boolean;
     token: TokenAmount;
+    chain?: ExtendedChain;
     isBalanceLoading?: boolean;
 }

package/cjs/config/version.d.ts

@@ -1,2 +1,2 @@
 export declare const name = "@lifi/widget";
-export declare const version = "2.0.0-beta.6";
+export declare const version = "2.0.0-beta.8";

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 = '2.0.0-beta.6';
+exports.version = '2.0.0-beta.8';

package/cjs/hooks/useFundsSufficiency.js

@@ -10,8 +10,8 @@ const useGetTokenBalancesWithRetry_1 = require("./useGetTokenBalancesWithRetry")
 const useTokenAddressBalance_1 = require("./useTokenAddressBalance");
 const refetchInterval = 30000;
 const useFundsSufficiency = (route) => {
-    const { account, provider } = (0, providers_1.useWallet)();
-    const getTokenBalancesWithRetry = (0, useGetTokenBalancesWithRetry_1.useGetTokenBalancesWithRetry)(provider);
+    const { account } = (0, providers_1.useWallet)();
+    const getTokenBalancesWithRetry = (0, useGetTokenBalancesWithRetry_1.useGetTokenBalancesWithRetry)(account.signer?.provider);
     const [fromChainId, fromTokenAddress, fromAmount] = (0, react_hook_form_1.useWatch)({
         name: [
             providers_1.SwapFormKey.FromChain,

package/cjs/hooks/useGasRefuel.d.ts

@@ -3,5 +3,5 @@ export declare const useGasRefuel: () => {
     availble: boolean | undefined;
     isLoading: boolean;
     chain: import("@lifi/types").ExtendedChain | undefined;
-    gasRecommendation: import("@lifi/types").GasRecommendationResponse | undefined;
+    fromAmount: string | undefined;
 };

package/cjs/hooks/useGasRefuel.js

@@ -10,12 +10,11 @@ const useGasRecommendation_1 = require("./useGasRecommendation");
 const useTokenBalance_1 = require("./useTokenBalance");
 const useGasRefuel = () => {
     const { getChainById } = (0, _1.useChains)();
-    const [fromChainId, fromTokenAddress, toChainId, toTokenAddress, toAddress] = (0, react_hook_form_1.useWatch)({
+    const [fromChainId, fromTokenAddress, toChainId, toAddress] = (0, react_hook_form_1.useWatch)({
         name: [
             providers_1.SwapFormKey.FromChain,
             providers_1.SwapFormKey.FromToken,
             providers_1.SwapFormKey.ToChain,
-            providers_1.SwapFormKey.ToToken,
             providers_1.SwapFormKey.ToAddress,
         ],
     });
@@ -27,10 +26,7 @@ const useGasRefuel = () => {
         // We don't allow same chain refuel.
         // If a user runs out of gas, he can't send a source chain transaction.
         fromChainId === toChainId ||
-            // We don't want to apply auto refuel when swapping to native tokens
-            toChain?.nativeToken.address === toTokenAddress ||
             !gasRecommendation?.available ||
-            !gasRecommendation.recommended ||
             !nativeToken) {
             return false;
         }
@@ -41,21 +37,15 @@ const useGasRefuel = () => {
             .div(2);
         const insufficientGas = tokenBalance.lt(recommendedAmount);
         return insufficientGas;
-    }, [
-        fromChainId,
-        gasRecommendation?.available,
-        gasRecommendation?.recommended,
-        nativeToken,
-        toChain?.nativeToken.address,
-        toChainId,
-        toTokenAddress,
-    ]);
+    }, [fromChainId, gasRecommendation, nativeToken, toChainId]);
     return {
         enabled: enabled,
         availble: gasRecommendation?.available,
         isLoading: isLoading,
         chain: toChain,
-        gasRecommendation,
+        fromAmount: gasRecommendation?.available
+            ? gasRecommendation.fromAmount
+            : undefined,
     };
 };
 exports.useGasRefuel = useGasRefuel;

package/cjs/hooks/useGasSufficiency.js

@@ -7,9 +7,9 @@ const _1 = require(".");
 const providers_1 = require("../providers");
 const refetchInterval = 30000;
 const useGasSufficiency = (route) => {
-    const { account, provider } = (0, providers_1.useWallet)();
+    const { account } = (0, providers_1.useWallet)();
     const { getChainById } = (0, _1.useChains)();
-    const getTokenBalancesWithRetry = (0, _1.useGetTokenBalancesWithRetry)(provider);
+    const getTokenBalancesWithRetry = (0, _1.useGetTokenBalancesWithRetry)(account.signer?.provider);
     const { data: insufficientGas, isInitialLoading } = (0, react_query_1.useQuery)(['gas-sufficiency-check', account.address, route?.id], async () => {
         if (!account.address || !route) {
             return;