@lifi/widget 1.2.2 → 1.6.0

package/AppDrawer.style.d.ts

@@ -2,7 +2,7 @@
 export declare const DrawerButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "error" | "primary" | "secondary" | "info" | "warning" | undefined;
+    color?: "inherit" | "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/AppProvider.js

@@ -5,12 +5,14 @@ import { Fragment } from 'react';
 import { QueryClientProvider } from 'react-query';
 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';
 const QueryProvider = QueryClientProvider;
 export const AppProvider = ({ children, config, }) => {
+    useTelemetry(config === null || config === void 0 ? void 0 : config.disableTelemetry);
     const inRouterContext = useInRouterContext();
     const Router = inRouterContext ? Fragment : MemoryRouter;
     return (_jsx(WidgetProvider, Object.assign({ config: config }, { children: _jsx(ThemeProvider, { children: _jsx(QueryProvider, Object.assign({ client: queryClient }, { children: _jsx(Router, { children: _jsx(WalletProvider, { children: _jsx(SwapFormProvider, { children: children }) }) }) })) }) })));

package/components/Header/Header.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useWidgetConfig } from '@lifi/widget/providers/WidgetProvider';
 import { useLocation } from 'react-router-dom';
 import { ElementId } from '../../utils/elements';
 import { routes } from '../../utils/routes';
@@ -14,4 +15,7 @@ const HeaderContainer = ({ children }) => {
     const { pathname } = useLocation();
     return (_jsx(Container, Object.assign({ id: ElementId.Header, sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)) }, { children: children })));
 };
-export const Header = () => (_jsxs(HeaderContainer, { children: [_jsx(WalletHeader, {}), _jsx(NavigationHeader, {})] }));
+export const Header = () => {
+    const { walletManagement } = useWidgetConfig();
+    return (_jsxs(HeaderContainer, { children: [!walletManagement ? _jsx(WalletHeader, {}) : null, _jsx(NavigationHeader, {})] }));
+};

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

@@ -7,9 +7,7 @@ export declare const HeaderAppBar: import("@emotion/styled").StyledComponent<Omi
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, keyof import("react").HTMLAttributes<HTMLElement> | "key"> & {
     ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "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" | "ref" | "key" | "position" | "variant" | "square" | "elevation" | "enableColorOnDark"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    pt?: number | undefined;
-}, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "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" | "ref" | "key" | "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/components/Header/Header.style.js

@@ -1,15 +1,16 @@
 import { AppBar, Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
-export const HeaderAppBar = styled(AppBar, {
-    shouldForwardProp: (prop) => prop !== 'pt',
-})(({ theme, pt }) => ({
+export const HeaderAppBar = styled(AppBar)(({ theme }) => ({
     backgroundColor: theme.palette.background.default,
     color: theme.palette.text.primary,
     flexDirection: 'row',
     alignItems: 'center',
     position: 'relative',
     minHeight: 48,
-    padding: theme.spacing(pt !== null && pt !== void 0 ? pt : 0, 3, 0, 3),
+    padding: theme.spacing(0, 3, 0, 3),
+    ':first-of-type': {
+        paddingTop: theme.spacing(1.5),
+    },
 }));
 export const Container = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'sticky',

package/components/Header/WalletHeader.js

@@ -22,7 +22,7 @@ export const WalletHeader = () => {
     const walletAddress = account.address
         ? `${account.address.substring(0, 7)}...${account.address.substring(account.address.length - 7)}`
         : null;
-    return (_jsx(HeaderAppBar, Object.assign({ elevation: 0, pt: 1.5 }, { children: walletAddress ? (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ sx: {
+    return (_jsx(HeaderAppBar, Object.assign({ elevation: 0 }, { children: walletAddress ? (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ sx: {
                         display: 'flex',
                         flex: 1,
                         flexDirection: 'column',
@@ -34,7 +34,7 @@ const ConnectButton = () => {
     const { connect: walletConnect } = useWallet();
     const navigate = useNavigate();
     const connect = () => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.disableInternalWalletManagement) {
+        if (config.walletManagement) {
             yield walletConnect();
             return;
         }

package/components/LiFiLogo.js

@@ -3,5 +3,5 @@ import { ReactComponent as LiFiFullLogo } from '../icons/LiFiFullLogo.svg';
 import { ReactComponent as LiFiIconLogo } from '../icons/LiFiLogo.svg';
 export const LiFiLogo = ({ variant = 'icon', style }) => {
     const Component = variant === 'icon' ? LiFiIconLogo : LiFiFullLogo;
-    return _jsx(Component, { style: style, fill: "currentColor" });
+    return _jsx(Component, { style: style, fill: "currentColor", color: "currentColor" });
 };

package/components/PoweredBy/PoweredBy.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+import { LiFiLogo } from '../LiFiLogo';
+import { Link } from './PoweredBy.style';
+export const PoweredBy = () => {
+    return (_jsx(Box, Object.assign({ px: 3, pt: 2, pb: 2, sx: {
+            display: 'flex',
+            alignItems: 'flex-end',
+            justifyContent: 'flex-end',
+            flex: 1,
+        } }, { children: _jsxs(Link, Object.assign({ href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary" }, { children: [_jsx(Typography, Object.assign({ color: "text.secondary", fontSize: 12, px: 0.5 }, { children: "Powered by" })), _jsx(LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] })) })));
+};

package/components/PoweredBy/PoweredBy.style.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const Link: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").LinkBaseProps, "classes"> & {
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").LinkClasses> | undefined;
+    color?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue<import("csstype").Property.Color | import("csstype").Property.Color[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue<import("csstype").Property.Color | import("csstype").Property.Color[] | undefined>);
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    TypographyClasses?: (Partial<import("@mui/material").TypographyClasses> & Partial<import("@mui/material").ClassNameMap<never>>) | undefined;
+    underline?: "none" | "always" | "hover" | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | "@supports (font-variation-settings: normal)" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "p" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "key" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | "referrerPolicy" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "underline" | "TypographyClasses"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/PoweredBy/PoweredBy.style.js

@@ -0,0 +1,9 @@
+import { Link as MuiLink } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const Link = styled(MuiLink)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    ':hover': {
+        color: theme.palette.primary.main,
+    },
+}));

package/components/PoweredBy/index.d.ts

@@ -0,0 +1 @@
+export { PoweredBy } from './PoweredBy';

package/components/PoweredBy/index.js

@@ -0,0 +1 @@
+export { PoweredBy } from './PoweredBy';

package/components/ReverseTokensButton/ReverseTokensButton.style.d.ts

@@ -2,7 +2,7 @@
 export declare const IconButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "success" | "error" | "primary" | "secondary" | "info" | "warning" | undefined;
+    color?: "inherit" | "default" | "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;

package/components/SwapButton/SwapButton.js

@@ -8,7 +8,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useWidgetConfig } from '@lifi/widget/providers/WidgetProvider';
 import { ChainId } from '@lifinance/sdk';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -16,9 +15,9 @@ import { useNavigate } from 'react-router-dom';
 import { useChains, useHasSufficientBalance, useSwapRoutes } from '../../hooks';
 import { SwapFormKeyHelper } from '../../providers/SwapFormProvider';
 import { useWallet } from '../../providers/WalletProvider';
+import { useWidgetConfig } from '../../providers/WidgetProvider';
 import { useCurrentRoute, useSetExecutableRoute } from '../../stores';
 import { routes } from '../../utils/routes';
-import { ButtonTooltip } from './ButtonTooltip';
 import { Button } from './SwapButton.style';
 export const SwapButton = () => {
     var _a;
@@ -26,8 +25,7 @@ export const SwapButton = () => {
     const { t } = useTranslation();
     const { getChainById } = useChains();
     const config = useWidgetConfig();
-    const { connect: walletConnect } = useWallet();
-    const { account, switchChain } = useWallet();
+    const { account, switchChain, connect: walletConnect } = useWallet();
     const [currentRoute] = useCurrentRoute();
     const setExecutableRoute = useSetExecutableRoute();
     const { routes: swapRoutes, isLoading, isFetching } = useSwapRoutes();
@@ -38,7 +36,7 @@ export const SwapButton = () => {
     const isCurrentChainMatch = ((_a = getChainById(chainId || ChainId.ETH)) === null || _a === void 0 ? void 0 : _a.id) === account.chainId;
     const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive) {
-            if (config.disableInternalWalletManagement) {
+            if (config.walletManagement) {
                 yield walletConnect();
             }
             else {
@@ -62,27 +60,16 @@ export const SwapButton = () => {
             if (!isCurrentChainMatch) {
                 return t(`button.switchChain`);
             }
-            if (!hasSufficientBalance) {
-                return t(`swap.insufficientFunds`);
-            }
-            if (!hasGasBalanceOnStartChain) {
-                return t(`swap.insufficientGasOnStartChain`);
-            }
-            if (!hasGasOnCrossChain) {
-                return t(`swap.insufficientGasOnDestinationChain`);
-            }
             return t(`button.swap`);
         }
         return t(`button.connectWallet`);
     };
-    return (_jsx(ButtonTooltip, Object.assign({ title: !hasGasOnCrossChain
-            ? t(`swap.insufficientGasOnDestinationChainTooltip`)
-            : undefined }, { children: _jsx(Button, Object.assign({ variant: "contained", disableElevation: true, fullWidth: true, color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, 
-            // loading={isLoading || isFetching}
-            disabled: (!hasSufficientBalance ||
-                !hasGasBalanceOnStartChain ||
-                !hasGasOnCrossChain ||
-                isLoading ||
-                isFetching) &&
-                isCurrentChainMatch }, { children: getButtonText() })) })));
+    return (_jsx(Button, Object.assign({ variant: "contained", disableElevation: true, fullWidth: true, color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, 
+        // loading={isLoading || isFetching}
+        disabled: (!hasSufficientBalance ||
+            !hasGasBalanceOnStartChain ||
+            !hasGasOnCrossChain ||
+            isLoading ||
+            isFetching) &&
+            isCurrentChainMatch }, { children: getButtonText() })));
 };

package/components/SwapButton/SwapButton.style.d.ts

@@ -17,7 +17,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<{
 } & Omit<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material/Button").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "error" | "primary" | "secondary" | "info" | "warning" | undefined;
+    color?: "inherit" | "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

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

@@ -4,7 +4,7 @@ export declare const minInputFontSize = 14;
 export declare const FormControl: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
-    color?: "success" | "error" | "primary" | "secondary" | "info" | "warning" | undefined;
+    color?: "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
     disabled?: boolean | undefined;
     error?: boolean | undefined;
     fullWidth?: boolean | undefined;

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

@@ -2,7 +2,7 @@
 export declare const Button: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "error" | "primary" | "secondary" | "info" | "warning" | undefined;
+    color?: "inherit" | "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/components/TokenList/TokenList.js

@@ -47,10 +47,13 @@ export const TokenList = ({ formType, height, onClick, }) => {
         setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress);
         setValue(SwapFormKeyHelper.getAmountKey(formType), '');
         const oppositeFormType = formType === 'from' ? 'to' : 'from';
-        const [selectedOppositeToken] = getValues([
+        const [selectedOppositeToken, selectedOppositeChain, selectedChain] = getValues([
             SwapFormKeyHelper.getTokenKey(oppositeFormType),
+            SwapFormKeyHelper.getChainKey(oppositeFormType),
+            SwapFormKeyHelper.getChainKey(formType),
         ]);
-        if (selectedOppositeToken === tokenAddress) {
+        if (selectedOppositeToken === tokenAddress &&
+            selectedOppositeChain === selectedChain) {
             setValue(SwapFormKeyHelper.getTokenKey(oppositeFormType), '');
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();

package/config/sentry.d.ts

@@ -0,0 +1 @@
+export declare const initSentry: (enabled?: boolean) => void;

package/config/sentry.js

@@ -0,0 +1,20 @@
+import { CaptureConsole } from '@sentry/integrations';
+import * as Sentry from '@sentry/react';
+import { BrowserTracing } from '@sentry/tracing';
+import { version } from './version';
+export const initSentry = (enabled) => {
+    Sentry.init({
+        dsn: 'https://bc1312161bf948db9b9c82618035ec22@o1302189.ingest.sentry.io/6539228',
+        integrations: [
+            new BrowserTracing(),
+            new CaptureConsole({
+                levels: ['error'],
+            }),
+        ],
+        sampleRate: 1,
+        tracesSampleRate: 0.2,
+        enabled: enabled && process.env.NODE_ENV === 'production',
+        environment: process.env.NODE_ENV,
+        release: version,
+    });
+};

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/index.d.ts

@@ -6,6 +6,7 @@ export * from './useHasSufficientBalance';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
 export * from './useSwapRoutes';
+export * from './useTelemetry';
 export * from './useToken';
 export * from './useTokenBalance';
 export * from './useTokenBalances';

package/hooks/index.js

@@ -6,6 +6,7 @@ export * from './useHasSufficientBalance';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
 export * from './useSwapRoutes';
+export * from './useTelemetry';
 export * from './useToken';
 export * from './useTokenBalance';
 export * from './useTokenBalances';

package/hooks/useRouteExecution.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { useMutation } from 'react-query';
 import shallow from 'zustand/shallow';
 import { LiFi } from '../lifi';
@@ -16,6 +16,7 @@ import { useRouteStore } from '../stores';
 import { deepClone } from '../utils/deepClone';
 export const useRouteExecution = (routeId) => {
     const { account, switchChain } = useWallet();
+    const resumedAfterMount = useRef(false);
     const { route, status } = useRouteStore((state) => { var _a; return (_a = state.routes[routeId]) !== null && _a !== void 0 ? _a : {}; });
     const [updateRoute, restartRoute, removeRoute] = useRouteStore((state) => [state.updateRoute, state.restartRoute, state.removeRoute], shallow);
     const updateCallback = (updatedRoute) => {
@@ -116,12 +117,17 @@ export const useRouteExecution = (routeId) => {
         const isDone = route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
         const isFailed = route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
         const alreadyStarted = route.steps.some((step) => step.execution);
-        if (!isDone && !isFailed && alreadyStarted) {
+        if (!isDone &&
+            !isFailed &&
+            alreadyStarted &&
+            account.signer &&
+            !resumedAfterMount.current) {
+            resumedAfterMount.current = true;
             resumeRoute();
         }
         return () => LiFi.moveExecutionToBackground(route);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [account.signer]);
     return {
         executeRoute,
         restartRoute: restartRouteMutation,

package/hooks/useSwapRoutes.js

@@ -35,7 +35,7 @@ export const useSwapRoutes = () => {
             SwapFormKey.ToToken,
         ],
     });
-    const [fromTokenAmount] = useDebouncedWatch([SwapFormKey.FromAmount], 500);
+    const [fromTokenAmount] = useDebouncedWatch([SwapFormKey.FromAmount], 250);
     const { token } = useToken(fromChainId, fromTokenAddress);
     const isEnabled = Boolean(account.address) &&
         !isNaN(fromChainId) &&

package/hooks/useTelemetry.d.ts

@@ -0,0 +1 @@
+export declare const useTelemetry: (disabled?: boolean) => void;

package/hooks/useTelemetry.js

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+import { initSentry } from '../config/sentry';
+export const useTelemetry = (disabled) => {
+    useEffect(() => {
+        if (process.env.NODE_ENV === 'production' && disabled) {
+            console.warn('Enable crash reports and diagnostic data to be collected. This helps us to better understand how the widget is performing and where improvements need to be made.');
+            initSentry(false);
+        }
+    }, [disabled]);
+};

package/i18n/en/translation.json

@@ -46,10 +46,6 @@
     "selectChainAndToken": "Select chain and token",
     "inProgress": "In progress",
     "couldntFindTokens": "We couldn't find tokens on this chain or you don't have any.",
-    "insufficientFunds": "Insufficient funds",
-    "insufficientGasOnStartChain": "Insufficient gas on start chain",
-    "insufficientGasOnDestinationChain": "Insufficient gas on destination chain",
-    "insufficientGasOnDestinationChainTooltip": "The selected route requires a swap on the chain you are transferring to. You need to have gas on that chain to pay for the transaction there.",
     "stepSwap": "Swap",
     "stepBridge": "Bridge",
     "stepSwapAndBridge": "Swap and bridge",
@@ -72,6 +68,18 @@
         "fundsReceived": "You now have {{amount}} {{tokenSymbol}} in your wallet on {{chainName}} chain."
       }
     },
+    "warning": {
+      "title": {
+        "insufficientFunds": "Insufficient funds",
+        "insufficientGasOnStartChain": "Insufficient gas on start chain",
+        "insufficientGasOnDestinationChain": "Insufficient gas on destination chain"
+      },
+      "message": {
+        "insufficientFunds": "You don't have enough funds in this account.",
+        "insufficientGasOnStartChain": "The selected route requires a swap on the chain you are transferring from. You need to have gas on that chain to pay for the transaction there.",
+        "insufficientGasOnDestinationChain": "The selected route requires a swap on the chain you are transferring to. You need to have gas on that chain to pay for the transaction there."
+      }
+    },
     "error": {
       "title": {
         "chainSwitch": "Chain switch required.",
@@ -79,12 +87,14 @@
         "transactionUnderpriced": "Transaction is underpriced.",
         "transactionUnprepared": "Unable to prepare transaction.",
         "unknown": "Something went wrong.",
-        "userRejectedSignatureRequest": "Signature required."
+        "userRejectedSignatureRequest": "Signature required.",
+        "slippageTooLarge": "Slippage too large."
       },
       "message": {
         "signatureRequired": "Your signature is required to complete the transaction. {{amount}} {{tokenSymbol}} on {{chainName}} remain in your wallet.",
         "transactionFailed": "Please check the block explorer for more information.",
-        "transactionNotSent": "Transaction was not sent, your funds are still in your wallet ({{amount}} {{tokenSymbol}} on {{chainName}})."
+        "transactionNotSent": "Transaction was not sent, your funds are still in your wallet ({{amount}} {{tokenSymbol}} on {{chainName}}).",
+        "slippageTooLarge": "The slippage is larger than the defined threshold. Please request a new route to get a fresh quote."
       }
     },
     "process": {

package/i18n/index.d.ts

@@ -49,10 +49,6 @@ export declare const resources: {
                 selectChainAndToken: string;
                 inProgress: string;
                 couldntFindTokens: string;
-                insufficientFunds: string;
-                insufficientGasOnStartChain: string;
-                insufficientGasOnDestinationChain: string;
-                insufficientGasOnDestinationChainTooltip: string;
                 stepSwap: string;
                 stepBridge: string;
                 stepSwapAndBridge: string;
@@ -75,6 +71,18 @@ export declare const resources: {
                         fundsReceived: string;
                     };
                 };
+                warning: {
+                    title: {
+                        insufficientFunds: string;
+                        insufficientGasOnStartChain: string;
+                        insufficientGasOnDestinationChain: string;
+                    };
+                    message: {
+                        insufficientFunds: string;
+                        insufficientGasOnStartChain: string;
+                        insufficientGasOnDestinationChain: string;
+                    };
+                };
                 error: {
                     title: {
                         chainSwitch: string;
@@ -83,11 +91,13 @@ export declare const resources: {
                         transactionUnprepared: string;
                         unknown: string;
                         userRejectedSignatureRequest: string;
+                        slippageTooLarge: string;
                     };
                     message: {
                         signatureRequired: string;
                         transactionFailed: string;
                         transactionNotSent: string;
+                        slippageTooLarge: string;
                     };
                 };
                 process: {

package/index.js

@@ -1,8 +1,10 @@
 import { App } from './App';
 import { AppDrawer } from './AppDrawer';
+import { initSentry } from './config/sentry';
 import './fonts/inter.css';
 import { configureReactI18next } from './i18n';
 export * from './types';
+initSentry(true);
 configureReactI18next();
 // ClassNameGenerator.configure((componentName) => componentName.replace('Mui', ''));
 export const LiFiWidget = App;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.2.2",
+  "version": "1.6.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "sideEffects": false,
   "main": "./index.js",
@@ -39,22 +39,25 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@ethersproject/experimental": "^5.6.2",
+    "@ethersproject/experimental": "^5.6.3",
     "@ethersproject/providers": "^5.6.8",
-    "@lifi/wallet-management": "^1.0.3",
-    "@lifinance/sdk": "^1.0.0-beta.11",
-    "@mui/icons-material": "^5.8.3",
-    "@mui/lab": "^5.0.0-alpha.85",
-    "@mui/material": "^5.8.3",
+    "@lifi/wallet-management": "^1.0.4",
+    "@lifinance/sdk": "^1.0.0-beta.13",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.89",
+    "@mui/material": "^5.8.7",
+    "@sentry/integrations": "^7.5.0",
+    "@sentry/react": "^7.5.0",
+    "@sentry/tracing": "^7.5.0",
     "big.js": "^6.2.0",
-    "i18next": "^21.8.9",
-    "immer": "^9.0.14",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-hook-form": "^7.32.0",
-    "react-i18next": "^11.17.1",
+    "i18next": "^21.8.12",
+    "immer": "^9.0.15",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.33.1",
+    "react-i18next": "^11.17.4",
     "react-query": "^4.0.0-beta.23",
-    "react-resize-detector": "^7.1.1",
+    "react-resize-detector": "^7.1.2",
     "react-router-dom": "^6.3.0",
     "react-timer-hook": "^3.0.5",
     "react-virtual": "^2.10.4",

package/pages/MainPage/InsufficientGasOrFundsMessage.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const InsufficientGasOrFundsMessage: React.FC;

package/pages/MainPage/InsufficientGasOrFundsMessage.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { CardTitle } from '../../components/Card';
+import { useHasSufficientBalance } from '../../hooks';
+import { MessageCard } from './InsufficientGasOrFundsMessage.style';
+export const InsufficientGasOrFundsMessage = () => {
+    const { t } = useTranslation();
+    const { hasGasBalanceOnStartChain, hasGasOnCrossChain, hasSufficientBalance, } = useHasSufficientBalance();
+    if (hasSufficientBalance && hasGasBalanceOnStartChain && hasGasOnCrossChain) {
+        return null;
+    }
+    let title;
+    let message;
+    if (!hasSufficientBalance) {
+        title = t(`swap.warning.title.insufficientFunds`);
+        message = t(`swap.warning.message.insufficientFunds`);
+    }
+    if (!hasGasBalanceOnStartChain) {
+        title = t(`swap.warning.title.insufficientGasOnStartChain`);
+        message = t(`swap.warning.message.insufficientGasOnStartChain`);
+    }
+    if (!hasGasOnCrossChain) {
+        title = t(`swap.warning.title.insufficientGasOnDestinationChain`);
+        message = t(`swap.warning.message.insufficientGasOnDestinationChain`);
+    }
+    return (_jsxs(MessageCard, Object.assign({ mx: 3, mb: 3 }, { children: [_jsx(CardTitle, { children: title }), _jsx(Typography, Object.assign({ variant: "body2", px: 2, pb: 2, pt: 1 }, { children: message }))] })));
+};

package/pages/MainPage/InsufficientGasOrFundsMessage.style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const MessageCard: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "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>, {}, {}>;

package/pages/MainPage/InsufficientGasOrFundsMessage.style.js

@@ -0,0 +1,9 @@
+import { Box } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+export const MessageCard = styled(Box)(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'light'
+        ? theme.palette.warning.light
+        : alpha(theme.palette.warning.dark, 0.69),
+    borderRadius: theme.shape.borderRadius,
+    position: 'relative',
+}));

package/pages/MainPage/MainPage.js

@@ -5,7 +5,8 @@ import { SwapButton } from '../../components/SwapButton';
 import { SwapInProgress } from '../../components/SwapInProgress';
 import { SwapInput } from '../../components/SwapInput';
 import { SwapRoutes } from '../../components/SwapRoutes';
+import { InsufficientGasOrFundsMessage } from './InsufficientGasOrFundsMessage';
 import { FormContainer } from './MainPage.style';
 export const MainPage = () => {
-    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(SwapInProgress, { mx: 3, mt: 2, mb: 1 }), _jsx(SelectChainAndToken, { mt: 2, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), _jsx(SwapRoutes, { mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 1 }, { children: _jsx(SwapButton, {}) }))] })));
+    return (_jsxs(FormContainer, Object.assign({ disableGutters: true }, { children: [_jsx(SwapInProgress, { mx: 3, mt: 2, mb: 1 }), _jsx(SelectChainAndToken, { mt: 2, mx: 3, mb: 3 }), _jsx(Box, Object.assign({ mx: 3, mb: 3 }, { children: _jsx(SwapInput, { formType: "from" }) })), _jsx(SwapRoutes, { mx: 3, mb: 3 }), _jsx(InsufficientGasOrFundsMessage, {}), _jsx(Box, Object.assign({ mx: 3, mb: 1 }, { children: _jsx(SwapButton, {}) }))] })));
 };

package/pages/SettingsPage/ColorSchemeButtonGroup.style.d.ts

@@ -2,7 +2,7 @@
 export declare const ToggleButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ToggleButtonClasses> | undefined;
-    color?: "success" | "error" | "primary" | "secondary" | "info" | "warning" | "standard" | undefined;
+    color?: "success" | "warning" | "error" | "info" | "primary" | "secondary" | "standard" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     fullWidth?: boolean | undefined;

package/pages/SwapPage/ExecutionItem.style.d.ts

@@ -2,7 +2,7 @@
 export declare const LinkButton: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "success" | "error" | "primary" | "secondary" | "info" | "warning" | undefined;
+    color?: "inherit" | "default" | "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;

package/pages/SwapPage/SwapPage.style.d.ts

@@ -12,7 +12,7 @@ export declare const Container: import("@emotion/styled").StyledComponent<{
 export declare const Button: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "success" | "error" | "primary" | "secondary" | "info" | "warning" | undefined;
+    color?: "inherit" | "success" | "warning" | "error" | "info" | "primary" | "secondary" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;

package/pages/SwapPage/utils.js

@@ -63,6 +63,10 @@ export function getProcessMessage(t, getChainById, step, process) {
                 title = t(`swap.error.title.transactionUnprepared`);
                 message = getTransactionNotSentMessage();
                 break;
+            case LifiErrorCode.SlippageError:
+                title = t(`swap.error.title.slippageTooLarge`);
+                message = t(`swap.error.message.slippageTooLarge`);
+                break;
             case MetaMaskProviderErrorCode.userRejectedRequest:
                 title = t(`swap.error.title.userRejectedSignatureRequest`);
                 message = t(`swap.error.message.signatureRequired`, {

package/pages/SwapRoutesPage/SwapRoutesPage.js

@@ -19,6 +19,9 @@ export const SwapRoutesPage = () => {
         setExecutableRoute(route);
         navigate(routes.swap, { state: { routeId: route.id }, replace: true });
     };
+    // A route for this transaction does not exist yet possibly due to liquidity issues or because the amount of tokens you are sending is below the bridge minimum amount.
+    // Please try again later or change the tokens you intend to swap.
+    // If the problem persists, come to our Discord and leave a message in the support channel.
     return (_jsx(Stack, Object.assign({ direction: "column", spacing: 2 }, { children: isLoading || isFetching
             ? Array.from({ length: 3 }).map((_, index) => (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 196, sx: { borderRadius: 1 } }, index)))
             : swapRoutes === null || swapRoutes === void 0 ? void 0 : swapRoutes.map((route, index) => (_jsx(SwapRouteCard, { route: route, active: (currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.id) === route.id, onClick: () => handleRouteClick(route) }, route.id))) })));

package/providers/WalletProvider/WalletProvider.js

@@ -26,101 +26,73 @@ const initialContext = {
 const WalletContext = createContext(initialContext);
 export const useWallet = () => useContext(WalletContext);
 export const WalletProvider = ({ children }) => {
-    var _a;
     const config = useWidgetConfig();
     const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, } = useLifiWalletManagement();
     const [account, setAccount] = useState({});
-    useEffect(() => {
-        var _a;
-        console.log('walletProvider: signer changed', (_a = config.externalWalletManagementSettings) === null || _a === void 0 ? void 0 : _a.signer);
-        const updateSigner = () => __awaiter(void 0, void 0, void 0, function* () {
-            var _b;
-            const account = yield extractAccountFromSigner((_b = config.externalWalletManagementSettings) === null || _b === void 0 ? void 0 : _b.signer);
-            setAccount(account);
-            console.log('walletProvider: signer changed account', account);
-        });
-        updateSigner();
-    }, [(_a = config.externalWalletManagementSettings) === null || _a === void 0 ? void 0 : _a.signer]);
     const connect = useCallback((wallet) => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.disableInternalWalletManagement) {
-            const signer = yield config.externalWalletManagementSettings.connect();
+        if (config.walletManagement) {
+            const signer = yield config.walletManagement.connect();
             const account = yield extractAccountFromSigner(signer);
             setAccount(account);
             return;
         }
         yield walletManagementConnect(wallet);
-    }), [
-        config.disableInternalWalletManagement,
-        config.externalWalletManagementSettings,
-        walletManagementConnect,
-    ]);
+    }), [config.walletManagement, walletManagementConnect]);
     const disconnect = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.disableInternalWalletManagement) {
-            yield config.externalWalletManagementSettings.disconnect();
+        if (config.walletManagement) {
+            yield config.walletManagement.disconnect();
             setAccount({});
             return;
         }
         yield walletManagementDisconnect();
-    }), [
-        config.disableInternalWalletManagement,
-        config.externalWalletManagementSettings,
-        walletManagementDisconnect,
-    ]);
+    }), [config.walletManagement, walletManagementDisconnect]);
     // only for injected wallets
     const switchChain = useCallback((chainId) => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.disableInternalWalletManagement) {
-            const signer = yield config.externalWalletManagementSettings.switchChain(chainId);
+        if (config.walletManagement) {
+            const signer = yield config.walletManagement.switchChain(chainId);
             const account = yield extractAccountFromSigner(signer);
             setAccount(account);
         }
         return walletSwitchChain(chainId);
-    }), [
-        config.disableInternalWalletManagement,
-        config.externalWalletManagementSettings,
-    ]);
+    }), [config.walletManagement]);
     const addChain = useCallback((chainId) => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.disableInternalWalletManagement) {
-            return config.externalWalletManagementSettings.addChain(chainId);
+        if (config.walletManagement) {
+            return config.walletManagement.addChain(chainId);
         }
         return walletAddChain(chainId);
-    }), [
-        config.disableInternalWalletManagement,
-        config.externalWalletManagementSettings,
-    ]);
+    }), [config.walletManagement]);
     const addToken = useCallback((chainId, token) => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.disableInternalWalletManagement) {
-            return config.externalWalletManagementSettings.addToken(token, chainId);
+        if (config.walletManagement) {
+            return config.walletManagement.addToken(token, chainId);
         }
         return switchChainAndAddToken(chainId, token);
-    }), [
-        config.disableInternalWalletManagement,
-        config.externalWalletManagementSettings,
-    ]);
+    }), [config.walletManagement]);
     const attemptEagerConnect = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.disableInternalWalletManagement) {
+        if (config.walletManagement) {
             try {
-                const signer = yield config.externalWalletManagementSettings.provideSigner();
+                const signer = yield config.walletManagement.getSigner();
                 const account = yield extractAccountFromSigner(signer);
                 setAccount(() => (Object.assign({}, account)));
             }
             catch (e) {
-                console.warn('attempted eagerconnect', e);
+                console.warn('WalletProvider: attempted eager connect.', e);
             }
         }
-    }), [
-        config.disableInternalWalletManagement,
-        config.externalWalletManagementSettings,
-    ]);
+    }), [config.walletManagement]);
     // keep account information up to date
     useEffect(() => {
         const updateAccount = () => __awaiter(void 0, void 0, void 0, function* () {
-            if (!config.disableInternalWalletManagement) {
+            if (config.walletManagement) {
+                const account = yield extractAccountFromSigner(config.walletManagement.signer);
+                setAccount(account);
+            }
+            else {
                 const account = yield extractAccountFromSigner(signer);
                 setAccount(account);
             }
         });
         updateAccount();
-    }, [signer, config.disableInternalWalletManagement]);
+    }, [signer, config.walletManagement]);
     const value = useMemo(() => ({
         connect,
         disconnect,

package/types/widget.d.ts

@@ -9,10 +9,10 @@ export declare type ThemeConfig = {
     shape?: Shape;
     typography?: TypographyOptions;
 };
-export interface WidgetWalletCallbacks {
+export interface WidgetWalletManagement {
     connect(): Promise<Signer>;
     disconnect(): Promise<void>;
-    provideSigner(): Promise<Signer | undefined>;
+    getSigner(): Promise<Signer | undefined>;
     switchChain(reqChainId: number): Promise<Signer>;
     addToken(token: Token, chainId: number): Promise<void>;
     addChain(chainId: number): Promise<boolean>;
@@ -25,6 +25,8 @@ interface WidgetConfigBase {
     theme?: ThemeConfig;
     appearance?: Appearance;
     disableAppearance?: boolean;
+    disableTelemetry?: boolean;
+    walletManagement?: WidgetWalletManagement;
 }
 declare type WidgetFromTokenConfig = {
     fromChain: `${ChainKey}` | number;
@@ -40,12 +42,5 @@ declare type WidgetToTokenConfig = {
     toChain?: never;
     toToken?: never;
 };
-declare type WidgetWalletManagementConfig = {
-    disableInternalWalletManagement: true;
-    externalWalletManagementSettings: WidgetWalletCallbacks;
-} | {
-    disableInternalWalletManagement?: false;
-    externalWalletManagementSettings?: never;
-};
-export declare type WidgetConfig = WidgetConfigBase & WidgetFromTokenConfig & WidgetToTokenConfig & WidgetWalletManagementConfig;
+export declare type WidgetConfig = WidgetConfigBase & WidgetFromTokenConfig & WidgetToTokenConfig;
 export {};

package/components/PoweredBy.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Link, Typography } from '@mui/material';
-import { LiFiLogo } from './LiFiLogo';
-export const PoweredBy = () => {
-    return (_jsx(Box, Object.assign({ px: 3, pt: 2, pb: 2, sx: {
-            display: 'flex',
-            alignItems: 'flex-end',
-            justifyContent: 'flex-end',
-            flex: 1,
-        } }, { children: _jsxs(Link, Object.assign({ sx: {
-                display: 'flex',
-                alignItems: 'center',
-            }, href: "https://li.fi", target: "_blank", underline: "none", color: "text.primary" }, { children: [_jsx(Typography, Object.assign({ color: "text.secondary", fontSize: 12, px: 0.5 }, { children: "Powered by" })), _jsx(LiFiLogo, { variant: "full", style: { height: 16, width: 42 } })] })) })));
-};