@lifi/widget 1.16.0 → 1.17.1

package/AppDrawer.d.ts

@@ -1,14 +1,14 @@
 import type { DrawerProps } from '@mui/material';
 import type { RefObject } from 'react';
 import type { WidgetConfig } from './types';
-export declare type AppDrawerProps = DrawerProps & {
+export declare type WidgetDrawerProps = DrawerProps & {
     elementRef?: RefObject<HTMLDivElement>;
     config?: WidgetConfig;
 };
-export interface AppDrawerBase {
+export interface WidgetDrawer {
     isOpen(): void;
     toggleDrawer(): void;
     openDrawer(): void;
     closeDrawer(): void;
 }
-export declare const AppDrawer: import("react").ForwardRefExoticComponent<Pick<AppDrawerProps, "className" | "style" | "classes" | "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" | "transitionDuration" | "variant" | "open" | "anchor" | "elementRef" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "config" | "elevation" | "ModalProps" | "PaperProps" | "SlideProps"> & import("react").RefAttributes<AppDrawerBase>>;
+export declare const AppDrawer: import("react").ForwardRefExoticComponent<Pick<WidgetDrawerProps, "className" | "style" | "classes" | "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" | "transitionDuration" | "variant" | "open" | "anchor" | "elementRef" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "config" | "elevation" | "ModalProps" | "PaperProps" | "SlideProps"> & import("react").RefAttributes<WidgetDrawer>>;

package/AppProvider.d.ts

@@ -5,7 +5,3 @@ export interface AppProps {
 }
 export declare const AppProvider: React.FC<PropsWithChildren<AppProps>>;
 export declare const AppRouter: React.FC<PropsWithChildren<{}>>;
-export declare const TelemetryProvider: React.FC<{
-    children: React.ReactElement<any, any> | null;
-    disabled?: boolean;
-}>;

package/AppProvider.js

@@ -3,21 +3,13 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { Fragment } from 'react';
 import { MemoryRouter, useInRouterContext } from 'react-router-dom';
 import { queryClient } from './config/queryClient';
-import { useTelemetry } from './hooks';
-import { SwapFormProvider } from './providers/SwapFormProvider';
-import { ThemeProvider } from './providers/ThemeProvider';
-import { WalletProvider } from './providers/WalletProvider';
-import { WidgetProvider } from './providers/WidgetProvider';
+import { SDKProvider, SwapFormProvider, TelemetryProvider, ThemeProvider, WalletProvider, WidgetProvider, } from './providers';
 const QueryProvider = QueryClientProvider;
 export const AppProvider = ({ children, config, }) => {
-    return (_jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(TelemetryProvider, Object.assign({ disabled: config === null || config === void 0 ? void 0 : config.disableTelemetry }, { children: _jsx(WalletProvider, Object.assign({ walletManagement: config === null || config === void 0 ? void 0 : config.walletManagement }, { children: _jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(ThemeProvider, { children: _jsx(SwapFormProvider, { children: _jsx(AppRouter, { children: children }) }) }) })) })) })) })));
+    return (_jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(SDKProvider, { children: _jsx(TelemetryProvider, { children: _jsx(SwapFormProvider, { children: _jsx(ThemeProvider, { children: _jsx(WalletProvider, { children: _jsx(AppRouter, { children: children }) }) }) }) }) }) })) })));
 };
 export const AppRouter = ({ children }) => {
     const inRouterContext = useInRouterContext();
     const Router = inRouterContext ? Fragment : MemoryRouter;
     return _jsx(Router, { children: children });
 };
-export const TelemetryProvider = ({ children, disabled }) => {
-    useTelemetry(disabled);
-    return children;
-};

package/README.md

@@ -83,7 +83,7 @@ Visit our [playground](https://testing.li.finance) to see how you can customize
 
 ## Documentation
 
-[LI.FI Documentation](https://docs.li.fi)
+[LI.FI Widget Documentation](https://docs.li.fi/integrate-li.fi-widget/li.fi-widget-overview)
 
 ## Changelog
 

package/cjs/AppDrawer.d.ts

@@ -1,14 +1,14 @@
 import type { DrawerProps } from '@mui/material';
 import type { RefObject } from 'react';
 import type { WidgetConfig } from './types';
-export declare type AppDrawerProps = DrawerProps & {
+export declare type WidgetDrawerProps = DrawerProps & {
     elementRef?: RefObject<HTMLDivElement>;
     config?: WidgetConfig;
 };
-export interface AppDrawerBase {
+export interface WidgetDrawer {
     isOpen(): void;
     toggleDrawer(): void;
     openDrawer(): void;
     closeDrawer(): void;
 }
-export declare const AppDrawer: import("react").ForwardRefExoticComponent<Pick<AppDrawerProps, "className" | "style" | "classes" | "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" | "transitionDuration" | "variant" | "open" | "anchor" | "elementRef" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "config" | "elevation" | "ModalProps" | "PaperProps" | "SlideProps"> & import("react").RefAttributes<AppDrawerBase>>;
+export declare const AppDrawer: import("react").ForwardRefExoticComponent<Pick<WidgetDrawerProps, "className" | "style" | "classes" | "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" | "transitionDuration" | "variant" | "open" | "anchor" | "elementRef" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "config" | "elevation" | "ModalProps" | "PaperProps" | "SlideProps"> & import("react").RefAttributes<WidgetDrawer>>;

package/cjs/AppProvider.d.ts

@@ -5,7 +5,3 @@ export interface AppProps {
 }
 export declare const AppProvider: React.FC<PropsWithChildren<AppProps>>;
 export declare const AppRouter: React.FC<PropsWithChildren<{}>>;
-export declare const TelemetryProvider: React.FC<{
-    children: React.ReactElement<any, any> | null;
-    disabled?: boolean;
-}>;

package/cjs/AppProvider.js

@@ -1,19 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TelemetryProvider = exports.AppRouter = exports.AppProvider = void 0;
+exports.AppRouter = exports.AppProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const queryClient_1 = require("./config/queryClient");
-const hooks_1 = require("./hooks");
-const SwapFormProvider_1 = require("./providers/SwapFormProvider");
-const ThemeProvider_1 = require("./providers/ThemeProvider");
-const WalletProvider_1 = require("./providers/WalletProvider");
-const WidgetProvider_1 = require("./providers/WidgetProvider");
+const providers_1 = require("./providers");
 const QueryProvider = react_query_1.QueryClientProvider;
 const AppProvider = ({ children, config, }) => {
-    return ((0, jsx_runtime_1.jsx)(QueryProvider, Object.assign({ client: queryClient_1.queryClient }, { children: (0, jsx_runtime_1.jsx)(exports.TelemetryProvider, Object.assign({ disabled: config === null || config === void 0 ? void 0 : config.disableTelemetry }, { children: (0, jsx_runtime_1.jsx)(WalletProvider_1.WalletProvider, Object.assign({ walletManagement: config === null || config === void 0 ? void 0 : config.walletManagement }, { children: (0, jsx_runtime_1.jsx)(WidgetProvider_1.WidgetProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(SwapFormProvider_1.SwapFormProvider, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) })) })) })) })));
+    return ((0, jsx_runtime_1.jsx)(QueryProvider, Object.assign({ client: queryClient_1.queryClient }, { children: (0, jsx_runtime_1.jsx)(providers_1.WidgetProvider, Object.assign({ config: config }, { children: (0, jsx_runtime_1.jsx)(providers_1.SDKProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.TelemetryProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.SwapFormProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { children: (0, jsx_runtime_1.jsx)(providers_1.WalletProvider, { children: (0, jsx_runtime_1.jsx)(exports.AppRouter, { children: children }) }) }) }) }) }) })) })));
 };
 exports.AppProvider = AppProvider;
 const AppRouter = ({ children }) => {
@@ -22,8 +18,3 @@ const AppRouter = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(Router, { children: children });
 };
 exports.AppRouter = AppRouter;
-const TelemetryProvider = ({ children, disabled }) => {
-    (0, hooks_1.useTelemetry)(disabled);
-    return children;
-};
-exports.TelemetryProvider = TelemetryProvider;

package/cjs/components/AppContainer.js

@@ -6,7 +6,7 @@ const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
-const WidgetProvider_1 = require("../providers/WidgetProvider");
+const providers_1 = require("../providers");
 const utils_1 = require("../utils");
 const CssBaselineContainer = (0, styles_1.styled)(material_1.ScopedCssBaseline)(({ theme }) => ({
     // height: '100%',
@@ -44,7 +44,7 @@ exports.FlexContainer = (0, styles_1.styled)(material_1.Container)({
 });
 const AppContainer = ({ children }) => {
     const ref = (0, react_1.useRef)(null);
-    const { containerStyle } = (0, WidgetProvider_1.useWidgetConfig)();
+    const { containerStyle } = (0, providers_1.useWidgetConfig)();
     return ((0, jsx_runtime_1.jsxs)(RelativeContainer, Object.assign({ sx: containerStyle }, { children: [(0, jsx_runtime_1.jsx)(ScrollableContainer, Object.assign({ id: utils_1.ElementId.ScrollableContainer, ref: ref }, { children: (0, jsx_runtime_1.jsx)(CssBaselineContainer, Object.assign({ enableColorScheme: true }, { children: (0, jsx_runtime_1.jsx)(exports.FlexContainer, Object.assign({ disableGutters: true }, { children: children })) })) })), (0, jsx_runtime_1.jsx)(exports.ScrollToLocation, { elementRef: ref })] })));
 };
 exports.AppContainer = AppContainer;

package/cjs/components/ChainSelect/ChainSelect.style.js

@@ -4,15 +4,15 @@ exports.ChainContainer = exports.ChainCard = void 0;
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const Card_1 = require("../../components/Card");
-exports.ChainCard = (0, styles_1.styled)(Card_1.Card)(({ theme }) => ({
+exports.ChainCard = (0, styles_1.styled)(Card_1.Card)({
     display: 'grid',
     placeItems: 'center',
-    width: 56,
+    minWidth: 56,
     height: 56,
-}));
+});
 exports.ChainContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
     display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fit, 56px)',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(56px, 1fr))',
     gridAutoRows: '56px',
     justifyContent: 'space-between',
     gap: theme.spacing(1.5),

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

@@ -1,6 +1,6 @@
 import type { EVMChain } from '@lifi/sdk';
-import type { SwapFormDirection } from '../../providers';
-export declare const useChainSelect: (formType: SwapFormDirection) => {
+import type { SwapFormType } from '../../providers';
+export declare const useChainSelect: (formType: SwapFormType) => {
     chains: EVMChain[] | undefined;
     getChains: () => EVMChain[];
     setCurrentChain: (chainId: number) => void;

package/cjs/components/GasSufficiencyMessage/GasSufficiencyMessage.js

@@ -23,15 +23,15 @@ const GasSufficiencyMessage = (_a) => {
     var { route } = _a, props = __rest(_a, ["route"]);
     const { t } = (0, react_i18next_1.useTranslation)();
     const { insufficientFunds, insufficientGas } = (0, hooks_1.useGasSufficiency)(route);
-    if (!insufficientFunds && !insufficientGas.length) {
+    if (!insufficientFunds && !(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)) {
         return null;
     }
     return ((0, jsx_runtime_1.jsxs)(GasSufficiencyMessage_style_1.MessageCard, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.WarningAmber, { sx: {
                     marginTop: 2,
                     marginLeft: 2,
-                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [insufficientGas.length ? ((0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length ? 0 : 2, pt: insufficientGas.length ? 1 : 2 }, { children: insufficientFunds
+                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? ((0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pb: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 0 : 2, pt: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 1 : 2 }, { children: insufficientFunds
                             ? t(`swap.warning.message.insufficientFunds`)
-                            : null }))) : null, insufficientGas.length ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, insufficientGas.length
+                            : null }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)
                         ? insufficientGas.map((item, index) => {
                             var _a, _b;
                             return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length - 1 === index ? 2 : 0, pt: 0.5 }, { children: t(`swap.tokenOnChainAmount`, {

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

@@ -1,6 +1,4 @@
-/// <reference types="react" />
 import type { HeaderActionStore } from './types';
 export declare const useHeaderActionStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<HeaderActionStore>, "setState"> & {
     setState(nextStateOrUpdater: HeaderActionStore | Partial<HeaderActionStore> | ((state: import("immer/dist/internal").WritableDraft<HeaderActionStore>) => void), shouldReplace?: boolean | undefined): void;
 }>;
-export declare const useSetHeaderAction: () => (element?: import("react").ReactNode) => () => void;

package/cjs/components/Header/useHeaderActionStore.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSetHeaderAction = exports.useHeaderActionStore = void 0;
+exports.useHeaderActionStore = void 0;
 /* eslint-disable no-underscore-dangle */
 const zustand_1 = __importDefault(require("zustand"));
 const immer_1 = require("zustand/middleware/immer");
@@ -20,7 +20,3 @@ exports.useHeaderActionStore = (0, zustand_1.default)()((0, immer_1.immer)((set,
         });
     },
 })));
-const useSetHeaderAction = () => {
-    return (0, exports.useHeaderActionStore)((state) => state.setAction);
-};
-exports.useSetHeaderAction = useSetHeaderAction;

package/cjs/components/SelectChainAndToken.js

@@ -6,15 +6,15 @@ const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
 const ReverseTokensButton_1 = require("../components/ReverseTokensButton");
 const SelectTokenButton_1 = require("../components/SelectTokenButton");
-const SwapFormProvider_1 = require("../providers/SwapFormProvider");
+const providers_1 = require("../providers");
 const SelectChainAndToken = (props) => {
     const prefersNarrowView = (0, material_1.useMediaQuery)((theme) => theme.breakpoints.down('sm'));
     const [fromChain, toChain, fromToken, toToken] = (0, react_hook_form_1.useWatch)({
         name: [
-            SwapFormProvider_1.SwapFormKey.FromChain,
-            SwapFormProvider_1.SwapFormKey.ToChain,
-            SwapFormProvider_1.SwapFormKey.FromToken,
-            SwapFormProvider_1.SwapFormKey.ToToken,
+            providers_1.SwapFormKey.FromChain,
+            providers_1.SwapFormKey.ToChain,
+            providers_1.SwapFormKey.FromToken,
+            providers_1.SwapFormKey.ToToken,
         ],
     });
     const isCompact = fromChain && toChain && fromToken && toToken && !prefersNarrowView;

package/cjs/components/SwapButton/SwapButton.js

@@ -11,51 +11,33 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const sdk_1 = require("@lifi/sdk");
 const material_1 = require("@mui/material");
-const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../hooks");
 const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
 const SwapButton = ({ onClick, currentRoute, text, disable, }) => {
-    var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
-    const { getChainById } = (0, hooks_1.useChains)();
     const config = (0, providers_1.useWidgetConfig)();
-    const { account, switchChain, connect: walletConnect } = (0, providers_1.useWallet)();
+    const { account, connect } = (0, providers_1.useWallet)();
     const { insufficientFunds, insufficientGas } = (0, hooks_1.useGasSufficiency)(currentRoute);
-    const [chainId] = (0, react_hook_form_1.useWatch)({
-        name: [providers_1.SwapFormKeyHelper.getChainKey('from')],
-    });
-    // Allow switching chain only if execution is not started
-    const switchChainAllowed = ((_a = getChainById(chainId || sdk_1.ChainId.ETH)) === null || _a === void 0 ? void 0 : _a.id) !== account.chainId &&
-        currentRoute &&
-        !currentRoute.steps.some((step) => step.execution);
     const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive) {
             if (config.walletManagement) {
-                yield walletConnect();
+                yield connect();
             }
             else {
                 navigate(utils_1.navigationRoutes.selectWallet);
             }
         }
-        else if (switchChainAllowed) {
-            yield switchChain(chainId);
-            // check that the current route exists in the up to date route list
-        }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     });
     const getButtonText = () => {
         if (account.isActive) {
-            if (switchChainAllowed) {
-                return t(`button.switchChain`);
-            }
             if (!currentRoute) {
                 return t(`button.swap`);
             }
@@ -63,8 +45,6 @@ const SwapButton = ({ onClick, currentRoute, text, disable, }) => {
         }
         return t(`button.connectWallet`);
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: currentRoute &&
-            !switchChainAllowed &&
-            (insufficientFunds || !!insufficientGas.length || disable), fullWidth: true }, { children: getButtonText() })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) || disable, fullWidth: true }, { children: getButtonText() })));
 };
 exports.SwapButton = SwapButton;

package/cjs/components/TokenList/TokenList.js

@@ -53,6 +53,6 @@ const TokenList = ({ formType, height, onClick, }) => {
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     }, [formType, getValues, onClick, setValue]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? (0, jsx_runtime_1.jsx)(TokenNotFound_1.TokenNotFound, {}) : null, (0, jsx_runtime_1.jsx)(VirtualizedTokenList_1.VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? ((0, jsx_runtime_1.jsx)(TokenNotFound_1.TokenNotFound, { formType: formType })) : null, (0, jsx_runtime_1.jsx)(VirtualizedTokenList_1.VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] })));
 };
 exports.TokenList = TokenList;

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

@@ -7,7 +7,8 @@ const styles_1 = require("@mui/material/styles");
 const utils_1 = require("../../utils");
 exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusSecondary,
-    paddingLeft: theme.spacing(2),
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5),
     height: 64,
     width: '100%',
     '&:hover': {
@@ -21,8 +22,8 @@ exports.ListItem = (0, styles_1.styled)(material_1.ListItem)(({ theme }) => ({
     height: 64,
     flexDirection: 'column',
     alignItems: 'flex-start',
-    padding: theme.spacing(0, 3),
+    padding: theme.spacing(0, 1.5),
     [`.${ListItemSecondaryAction_1.listItemSecondaryActionClasses.root}`]: {
-        right: theme.spacing(5),
+        right: theme.spacing(3),
     },
 }));

package/cjs/components/TokenList/TokenListItem.js

@@ -19,7 +19,7 @@ exports.TokenListItem = (0, react_1.memo)(({ onClick, size, start, token, showBa
                                 }) }))) : null] })))) : null] })), endAdornment] })));
 });
 const TokenListItemSkeleton = () => {
-    return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItem, Object.assign({ secondaryAction: (0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {}), disablePadding: true, sx: { position: 'relative', flexDirection: 'row', alignItems: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 2, marginRight: 2 } }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 20 }), secondary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
+    return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItem, Object.assign({ secondaryAction: (0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {}), disablePadding: true, sx: { position: 'relative', flexDirection: 'row', alignItems: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 1.5, marginRight: 2 } }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 20 }), secondary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
 };
 exports.TokenListItemSkeleton = TokenListItemSkeleton;
 const TokenAmountSkeleton = () => {

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

@@ -1,2 +1,3 @@
 /// <reference types="react" />
-export declare const TokenNotFound: React.FC;
+import type { SwapFormTypeProps } from '../../providers';
+export declare const TokenNotFound: React.FC<SwapFormTypeProps>;

package/cjs/components/TokenList/TokenNotFound.js

@@ -4,9 +4,17 @@ exports.TokenNotFound = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
+const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
-const TokenNotFound = () => {
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const TokenNotFound = ({ formType }) => {
+    var _a;
     const { t } = (0, react_i18next_1.useTranslation)();
+    const [selectedChainId] = (0, react_hook_form_1.useWatch)({
+        name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
+    });
+    const { getChainById } = (0, hooks_1.useChains)();
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
             display: 'flex',
             justifyContent: 'center',
@@ -14,6 +22,8 @@ const TokenNotFound = () => {
             flexDirection: 'column',
             flex: 1,
             padding: 3,
-        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48, lineHeight: 1 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SearchOff, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2 }, { children: t('swap.couldntFindTokens') }))] })));
+        } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 48, lineHeight: 1 }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SearchOff, { fontSize: "inherit" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: 14, color: "text.secondary", textAlign: "center", mt: 2, px: 2 }, { children: t('swap.info.message.emptyTokenList', {
+                    chainName: (_a = getChainById(selectedChainId)) === null || _a === void 0 ? void 0 : _a.name,
+                }) }))] })));
 };
 exports.TokenNotFound = TokenNotFound;

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

@@ -1,9 +1,9 @@
 import type { TokenAmount } from '@lifi/sdk';
 import type { MutableRefObject } from 'react';
-import type { SwapFormDirection } from '../../providers';
+import type { SwapFormType } from '../../providers';
 import type { Token } from '../../types';
 export interface TokenListProps {
-    formType: SwapFormDirection;
+    formType: SwapFormType;
     height: number;
     onClick?(): void;
 }

package/cjs/config/version.d.ts

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

package/cjs/config/version.js

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

package/cjs/hooks/useChains.js

@@ -12,25 +12,38 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChains = void 0;
 const react_query_1 = require("@tanstack/react-query");
 const react_1 = require("react");
-const lifi_1 = require("../config/lifi");
-const WidgetProvider_1 = require("../providers/WidgetProvider");
+const react_hook_form_1 = require("react-hook-form");
+const providers_1 = require("../providers");
 const chains_1 = require("../stores/chains");
 const useChains = () => {
-    const { disabledChains } = (0, WidgetProvider_1.useWidgetConfig)();
-    const [, initializeChains] = (0, chains_1.useSetChainOrder)();
+    const { disabledChains, chains } = (0, providers_1.useWidgetConfig)();
+    const lifi = (0, providers_1.useLiFi)();
+    const { getValues, setValue } = (0, react_hook_form_1.useFormContext)();
     const { data, isLoading } = (0, react_query_1.useQuery)(['chains'], () => __awaiter(void 0, void 0, void 0, function* () {
-        const chains = yield lifi_1.LiFi.getChains();
-        const filteredChains = chains.filter((chain) => !(disabledChains === null || disabledChains === void 0 ? void 0 : disabledChains.includes(chain.id)));
-        initializeChains(filteredChains.map((chain) => chain.id));
-        return filteredChains;
+        const availableChains = yield lifi.getChains();
+        const filteredChains = availableChains.filter((chain) => (0, providers_1.isItemAllowed)(chain.id, chains, disabledChains));
+        const chainOrder = chains_1.useChainOrderStore
+            .getState()
+            .initializeChains(filteredChains.map((chain) => chain.id));
+        const [fromChainValue, toChainValue] = getValues([
+            providers_1.SwapFormKey.FromChain,
+            providers_1.SwapFormKey.ToChain,
+        ]);
+        if (!fromChainValue) {
+            setValue(providers_1.SwapFormKey.FromChain, chainOrder[0]);
+        }
+        if (!toChainValue) {
+            setValue(providers_1.SwapFormKey.ToChain, chainOrder[0]);
+        }
+        return { availableChains, filteredChains };
     }));
     const getChainById = (0, react_1.useCallback)((chainId) => {
-        const chain = data === null || data === void 0 ? void 0 : data.find((chain) => chain.id === chainId);
+        const chain = data === null || data === void 0 ? void 0 : data.availableChains.find((chain) => chain.id === chainId);
         // if (!chain) {
         //   throw new Error('Chain not found or chainId is invalid.');
         // }
         return chain;
     }, [data]);
-    return { chains: data, getChainById, isLoading };
+    return { chains: data === null || data === void 0 ? void 0 : data.filteredChains, getChainById, isLoading };
 };
 exports.useChains = useChains;

package/cjs/hooks/useFeaturedTokens.d.ts

@@ -1 +1 @@
-export declare const useFeaturedTokens: (selectedChainId: number) => import("@lifi/types").Token[] | undefined;
+export declare const useFeaturedTokens: (selectedChainId?: number) => import("@lifi/types").Token[];

package/cjs/hooks/useFeaturedTokens.js

@@ -2,9 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFeaturedTokens = void 0;
 const react_1 = require("react");
-const WidgetProvider_1 = require("../providers/WidgetProvider");
+const providers_1 = require("../providers");
 const useFeaturedTokens = (selectedChainId) => {
-    const { featuredTokens } = (0, WidgetProvider_1.useWidgetConfig)();
-    return (0, react_1.useMemo)(() => featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.filter((token) => token.chainId === selectedChainId), [featuredTokens, selectedChainId]);
+    const { featuredTokens, tokens } = (0, providers_1.useWidgetConfig)();
+    return (0, react_1.useMemo)(() => {
+        var _a;
+        return [...((_a = tokens === null || tokens === void 0 ? void 0 : tokens.featured) !== null && _a !== void 0 ? _a : []), ...(featuredTokens !== null && featuredTokens !== void 0 ? featuredTokens : [])].filter((token) => token.chainId === selectedChainId);
+    }, [featuredTokens, selectedChainId, tokens === null || tokens === void 0 ? void 0 : tokens.featured]);
 };
 exports.useFeaturedTokens = useFeaturedTokens;

package/cjs/hooks/useGasSufficiency.d.ts

@@ -9,7 +9,7 @@ interface GasSufficiency {
     chain?: EVMChain;
 }
 export declare const useGasSufficiency: (route?: Route) => {
-    insufficientGas: GasSufficiency[];
+    insufficientGas: GasSufficiency[] | undefined;
     insufficientFunds: boolean;
 };
 export {};