@lifi/widget 1.11.4 → 1.13.0

package/i18n/index.d.ts

@@ -53,6 +53,8 @@ export declare const resources: {
                 selectChain: string;
                 selectToken: string;
                 selectChainAndToken: string;
+                featuredTokens: string;
+                otherTokens: string;
                 inProgress: string;
                 couldntFindTokens: string;
                 stepSwap: string;
@@ -94,6 +96,7 @@ export declare const resources: {
                     title: {
                         insufficientGas: string;
                         deleteSwap: string;
+                        deleteSwapHistory: string;
                     };
                     message: {
                         insufficientFunds: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "1.11.4",
+  "version": "1.13.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",
@@ -37,30 +37,29 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
     "@ethersproject/experimental": "^5.6.3",
     "@ethersproject/providers": "^5.6.8",
-    "@lifi/sdk": "^1.0.2",
-    "@lifi/wallet-management": "^1.1.2",
+    "@lifi/sdk": "^1.1.3",
+    "@lifi/wallet-management": "^1.1.3",
     "@mui/icons-material": "^5.8.4",
-    "@mui/lab": "^5.0.0-alpha.92",
-    "@mui/material": "^5.9.2",
-    "@sentry/integrations": "^7.7.0",
-    "@sentry/react": "^7.7.0",
-    "@sentry/tracing": "^7.7.0",
+    "@mui/lab": "^5.0.0-alpha.94",
+    "@mui/material": "^5.10.0",
+    "@sentry/integrations": "^7.10.0",
+    "@sentry/react": "^7.10.0",
+    "@sentry/tracing": "^7.10.0",
     "@tanstack/react-query": "^4.0.10",
+    "@tanstack/react-virtual": "^3.0.0-beta.17",
     "big.js": "^6.2.1",
-    "i18next": "^21.8.14",
+    "i18next": "^21.9.0",
     "immer": "^9.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.33.1",
-    "react-i18next": "^11.18.1",
-    "react-resize-detector": "^7.1.2",
+    "react-hook-form": "^7.34.0",
+    "react-i18next": "^11.18.3",
     "react-router-dom": "^6.3.0",
     "react-timer-hook": "^3.0.5",
-    "react-virtual": "^2.10.4",
     "zustand": "^4.0.0"
   },
   "eslintConfig": {

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

@@ -8,4 +8,4 @@ export declare const Stack: import("@emotion/styled").StyledComponent<import("@m
     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" | "direction" | ("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") | "spacing" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | "direction" | ("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") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/pages/SelectTokenPage/ChainSelect.d.ts

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

package/pages/SelectTokenPage/ChainSelect.js

@@ -6,20 +6,23 @@ import { useTranslation } from 'react-i18next';
 import { Card, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
 import { useChains } from '../../hooks';
-import { SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
+import { SwapFormKey, SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
 import { useWidgetConfig } from '../../providers/WidgetProvider';
 export const ChainSelect = ({ formType }) => {
     const { t } = useTranslation();
-    const { setValue } = useFormContext();
+    const { setValue, register } = useFormContext();
     const { fromChain, toChain } = useWidgetConfig();
     const { chains, isLoading } = useChains();
+    const chainKey = SwapFormKeyHelper.getChainKey(formType);
     const [chainId] = useWatch({
-        name: [SwapFormKeyHelper.getChainKey(formType)],
+        name: [chainKey],
     });
+    const { onChange, onBlur, name, ref } = register(chainKey);
     const handleChain = (event) => {
-        setValue(SwapFormKeyHelper.getChainKey(formType), event.target.value);
+        onChange(event);
         setValue(SwapFormKeyHelper.getTokenKey(formType), '');
         setValue(SwapFormKeyHelper.getAmountKey(formType), '');
+        setValue(SwapFormKey.TokenSearchFilter, '');
     };
-    return !isLoading ? (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`swap.selectChain`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ labelId: "label", MenuProps: { elevation: 2 }, defaultValue: formType === 'from' ? fromChain : toChain, value: chainId, onChange: handleChain, IconComponent: KeyboardArrowDownIcon }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => (_jsxs(MenuItem, Object.assign({ value: chain.id }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.key }, { children: chain.name[0] })) }), chain.name] }), chain.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 98, sx: { borderRadius: 1 } }));
+    return !isLoading ? (_jsxs(Card, { children: [_jsx(CardTitle, { children: t(`swap.selectChain`) }), _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Select, Object.assign({ ref: ref, labelId: chainKey, name: name, MenuProps: { elevation: 2 }, defaultValue: formType === 'from' ? fromChain : toChain, value: chainId, onChange: handleChain, onBlur: onBlur, IconComponent: KeyboardArrowDownIcon }, { children: chains === null || chains === void 0 ? void 0 : chains.map((chain) => (_jsxs(MenuItem, Object.assign({ value: chain.id }, { children: [_jsx(ListItemAvatar, { children: _jsx(Avatar, Object.assign({ src: chain.logoURI, alt: chain.key }, { children: chain.name[0] })) }), chain.name] }), chain.key))) })) }))] })) : (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 98, sx: { borderRadius: 1 } }));
 };

package/pages/SelectTokenPage/SearchTokenInput.d.ts

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

package/pages/SelectTokenPage/SearchTokenInput.js

@@ -11,7 +11,7 @@ export const SearchTokenInput = () => {
     const { t } = useTranslation();
     const { register, setValue } = useFormContext();
     useEffect(() => () => {
-        setValue(SwapFormKey.SearchTokensFilter, '');
+        setValue(SwapFormKey.TokenSearchFilter, '');
     }, [setValue]);
-    return (_jsx(Card, { children: _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Input, { size: "small", placeholder: t(`swap.tokenSearch`), defaultValue: "", endAdornment: _jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(SearchIcon, {}) })), inputProps: Object.assign({ inputMode: 'search' }, register(SwapFormKey.SearchTokensFilter)), autoComplete: "off" }) })) }));
+    return (_jsx(Card, { children: _jsx(FormControl, Object.assign({ fullWidth: true }, { children: _jsx(Input, { size: "small", placeholder: t(`swap.tokenSearch`), defaultValue: "", endAdornment: _jsx(InputAdornment, Object.assign({ position: "end" }, { children: _jsx(SearchIcon, {}) })), inputProps: Object.assign({ inputMode: 'search' }, register(SwapFormKey.TokenSearchFilter)), autoComplete: "off" }) })) }));
 };

package/pages/SelectWalletPage/SelectWalletPage.d.ts

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

package/pages/SelectWalletPage/SelectWalletPage.style.d.ts

@@ -17,7 +17,7 @@ export declare const WalletListItemButton: import("@emotion/styled").StyledCompo
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & 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;
-}, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "selected" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "tabIndex" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "alignItems" | "autoFocus" | "dense" | "divider" | "selected" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const WalletListItem: import("@emotion/styled").StyledComponent<{
     button?: false | undefined;
 } & import("@mui/material").ListItemBaseProps & {
@@ -29,7 +29,7 @@ export declare const WalletListItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "components" | "componentsProps" | "selected" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "button" | "className" | "style" | "classes" | "children" | "disabled" | "sx" | "alignItems" | "autoFocus" | "dense" | "divider" | "components" | "componentsProps" | "selected" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "disablePadding" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const WalletListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const WalletIdentityPopoverContent: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;

package/pages/SettingsPage/AdvancedPreferences.d.ts

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

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

package/pages/SettingsPage/GasPriceSelect.d.ts

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

package/pages/SettingsPage/SettingsPage.d.ts

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

package/pages/SettingsPage/SlippageInput.d.ts

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

package/pages/SwapHistoryPage/SwapHistoryPage.js

@@ -1,14 +1,30 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Container, Stack } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DeleteOutline as DeleteIcon } from '@mui/icons-material';
+import { Button, Container, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, Stack, } from '@mui/material';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Dialog } from '../../components/Dialog';
+import { useSetHeaderAction } from '../../components/Header';
 import { useWallet } from '../../providers/WalletProvider';
+import { useRouteStore } from '../../stores';
 import { useSwapHistory } from '../../stores/route';
 import { SwapHistoryEmpty } from './SwapHistoryEmpty';
 import { SwapHistoryItem } from './SwapHistoryItem';
 export const SwapHistoryPage = () => {
+    const { t } = useTranslation();
     const { account } = useWallet();
     const swaps = useSwapHistory(account.address);
+    const deleteRoutes = useRouteStore((store) => store.deleteRoutes);
+    const setHeaderAction = useSetHeaderAction();
+    const [open, setOpen] = useState(false);
+    const toggleDialog = useCallback(() => {
+        setOpen((open) => !open);
+    }, []);
+    useEffect(() => {
+        return setHeaderAction(_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: toggleDialog }, { children: _jsx(DeleteIcon, {}) })));
+    }, [setHeaderAction, toggleDialog]);
     if (!swaps.length) {
         return _jsx(SwapHistoryEmpty, {});
     }
-    return (_jsx(Container, { children: _jsx(Stack, Object.assign({ spacing: 2, mt: 1 }, { children: swaps.length ? (swaps.map(({ route }) => (_jsx(SwapHistoryItem, { route: route }, route.id)))) : (_jsx(SwapHistoryEmpty, {})) })) }));
+    return (_jsxs(Container, { children: [_jsx(Stack, Object.assign({ spacing: 2, mt: 1 }, { children: swaps.length ? (swaps.map(({ route }) => (_jsx(SwapHistoryItem, { route: route }, route.id)))) : (_jsx(SwapHistoryEmpty, {})) })), _jsxs(Dialog, Object.assign({ open: open, onClose: toggleDialog }, { children: [_jsx(DialogTitle, { children: t('swap.warning.title.deleteSwapHistory') }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: t('swap.warning.message.deleteSwap') }) }), _jsxs(DialogActions, { children: [_jsx(Button, Object.assign({ onClick: toggleDialog }, { children: t('button.cancel') })), _jsx(Button, Object.assign({ onClick: deleteRoutes, autoFocus: true }, { children: t('button.delete') }))] })] }))] }));
 };

package/pages/SwapPage/StatusBottomSheet.js

@@ -17,10 +17,10 @@ export const StatusBottomSheet = ({ status, route, }) => {
     const navigate = useNavigate();
     const ref = useRef(null);
     const { getChainById } = useChains();
-    const { token, refetchBalance } = useTokenBalance(route.toChainId, route.toToken.address);
+    const { token, refetch: refetchBalance } = useTokenBalance(route.toChainId, route.toToken.address);
     const { setValue } = useFormContext();
     const clearFromAmount = () => {
-        refetchBalance(route.fromChainId, route.fromToken.address);
+        refetchBalance();
         setValue(SwapFormKey.FromAmount, '');
     };
     const handleDone = () => {

package/pages/SwapRoutesPage/SwapRoutesPage.style.d.ts

@@ -8,4 +8,4 @@ export declare const Stack: import("@emotion/styled").StyledComponent<import("@m
     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" | "direction" | ("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") | "spacing" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | "direction" | ("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") | "divider" | "spacing"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/providers/SwapFormProvider/SwapFormProvider.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const formDefaultValues: {
     fromAmount: string;
-    searchTokensFilter: string;
+    tokenSearchFilter: string;
 };
 export declare const SwapFormProvider: React.FC<React.PropsWithChildren<{}>>;

package/providers/SwapFormProvider/SwapFormProvider.js

@@ -1,18 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ChainId } from '@lifi/sdk';
+import { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
+import { useWallet } from '../WalletProvider';
 import { useWidgetConfig } from '../WidgetProvider';
 import { SwapFormKey } from './types';
 export const formDefaultValues = {
     [SwapFormKey.FromAmount]: '',
-    [SwapFormKey.SearchTokensFilter]: '',
+    [SwapFormKey.TokenSearchFilter]: '',
 };
 export const SwapFormProvider = ({ children, }) => {
-    var _a;
+    const { account } = useWallet();
     const { fromChain, fromToken, fromAmount, toChain, toToken } = useWidgetConfig();
     const methods = useForm({
-        defaultValues: Object.assign(Object.assign({}, formDefaultValues), { fromChain,
-            fromToken, fromAmount: (_a = fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toPrecision()) !== null && _a !== void 0 ? _a : formDefaultValues.fromAmount, toChain,
-            toToken }),
+        defaultValues: Object.assign(Object.assign({}, formDefaultValues), { fromChain: fromChain !== null && fromChain !== void 0 ? fromChain : ChainId.ETH, fromToken, fromAmount: (typeof fromAmount === 'number'
+                ? fromAmount === null || fromAmount === void 0 ? void 0 : fromAmount.toPrecision()
+                : fromAmount) || formDefaultValues.fromAmount, toChain: toChain !== null && toChain !== void 0 ? toChain : ChainId.ETH, toToken }),
     });
+    // Set wallet chain as default if no fromChain is provided by config and if it wasn't changed during widget usage
+    useEffect(() => {
+        const { isDirty, isTouched } = methods.getFieldState(SwapFormKey.FromChain, methods.formState);
+        if (account.isActive &&
+            account.chainId &&
+            !fromChain &&
+            !isDirty &&
+            !isTouched) {
+            methods.setValue(SwapFormKey.FromChain, account.chainId, {
+                shouldDirty: false,
+                shouldTouch: false,
+            });
+        }
+    }, [account.chainId, account.isActive, fromChain, methods]);
     return _jsx(FormProvider, Object.assign({}, methods, { children: children }));
 };

package/providers/SwapFormProvider/types.d.ts

@@ -2,7 +2,7 @@ export declare enum SwapFormKey {
     FromAmount = "fromAmount",
     FromChain = "fromChain",
     FromToken = "fromToken",
-    SearchTokensFilter = "searchTokensFilter",
+    TokenSearchFilter = "tokenSearchFilter",
     ToChain = "toChain",
     ToToken = "toToken"
 }
@@ -10,7 +10,7 @@ export declare type SwapFormValues = {
     [SwapFormKey.FromAmount]: string;
     [SwapFormKey.FromChain]: number;
     [SwapFormKey.FromToken]: string;
-    [SwapFormKey.SearchTokensFilter]: string;
+    [SwapFormKey.TokenSearchFilter]: string;
     [SwapFormKey.ToChain]: number;
     [SwapFormKey.ToToken]: string;
 };
@@ -19,7 +19,6 @@ export declare const SwapFormKeyHelper: {
     getChainKey: (formType: SwapFormDirection) => 'fromChain' | 'toChain';
     getTokenKey: (formType: SwapFormDirection) => 'fromToken' | 'toToken';
     getAmountKey: (formType: SwapFormDirection) => 'fromAmount' | 'toAmount';
-    getSearchTokensFilterKey: (formType: SwapFormDirection) => string;
 };
 export interface SwapFormTypeProps {
     formType: SwapFormDirection;

package/providers/SwapFormProvider/types.js

@@ -3,7 +3,7 @@ export var SwapFormKey;
     SwapFormKey["FromAmount"] = "fromAmount";
     SwapFormKey["FromChain"] = "fromChain";
     SwapFormKey["FromToken"] = "fromToken";
-    SwapFormKey["SearchTokensFilter"] = "searchTokensFilter";
+    SwapFormKey["TokenSearchFilter"] = "tokenSearchFilter";
     SwapFormKey["ToChain"] = "toChain";
     SwapFormKey["ToToken"] = "toToken";
 })(SwapFormKey || (SwapFormKey = {}));
@@ -11,5 +11,4 @@ export const SwapFormKeyHelper = {
     getChainKey: (formType) => `${formType}Chain`,
     getTokenKey: (formType) => `${formType}Token`,
     getAmountKey: (formType) => `${formType}Amount`,
-    getSearchTokensFilterKey: (formType) => `${formType}SearchTokensFilter`,
 };

package/providers/WalletProvider/WalletProvider.d.ts

@@ -1,4 +1,14 @@
+import { Signer } from 'ethers';
 import { FC, PropsWithChildren } from 'react';
+import { WidgetWalletManagement } from '../../types';
 import type { WalletContextProps } from './types';
 export declare const useWallet: () => WalletContextProps;
-export declare const WalletProvider: FC<PropsWithChildren<{}>>;
+export declare const WalletProvider: FC<PropsWithChildren<{
+    walletManagement?: WidgetWalletManagement;
+}>>;
+export declare const extractAccountFromSigner: (signer?: Signer) => Promise<{
+    address: string | undefined;
+    isActive: boolean;
+    signer: Signer | undefined;
+    chainId: number | undefined;
+}>;

package/providers/WalletProvider/WalletProvider.js

@@ -8,9 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { addChain as walletAddChain, switchChain as walletSwitchChain, switchChainAndAddToken, useLifiWalletManagement, } from '@lifi/wallet-management';
+import { addChain as walletAddChain, switchChain as walletSwitchChain, switchChainAndAddToken, useLiFiWalletManagement, } from '@lifi/wallet-management';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
-import { useWidgetConfig } from '../WidgetProvider';
 const stub = () => {
     throw new Error('You forgot to wrap your component in <WalletProvider>.');
 };
@@ -24,65 +23,57 @@ const initialContext = {
 };
 const WalletContext = createContext(initialContext);
 export const useWallet = () => useContext(WalletContext);
-export const WalletProvider = ({ children }) => {
-    const config = useWidgetConfig();
-    const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, } = useLifiWalletManagement();
+export const WalletProvider = ({ children, walletManagement }) => {
+    const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, } = useLiFiWalletManagement();
     const [account, setAccount] = useState({});
     const connect = useCallback((wallet) => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.walletManagement) {
-            const signer = yield config.walletManagement.connect();
+        if (walletManagement) {
+            const signer = yield walletManagement.connect();
             const account = yield extractAccountFromSigner(signer);
             setAccount(account);
             return;
         }
         yield walletManagementConnect(wallet);
-    }), [config.walletManagement, walletManagementConnect]);
+    }), [walletManagement, walletManagementConnect]);
     const disconnect = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (config.walletManagement) {
-            yield config.walletManagement.disconnect();
+        if (walletManagement) {
+            yield walletManagement.disconnect();
             setAccount({});
             return;
         }
         yield walletManagementDisconnect();
-    }), [config.walletManagement, walletManagementDisconnect]);
+    }), [walletManagement, walletManagementDisconnect]);
     // only for injected wallets
     const switchChain = useCallback((chainId) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
-        if ((_a = config.walletManagement) === null || _a === void 0 ? void 0 : _a.switchChain) {
-            const signer = yield config.walletManagement.switchChain(chainId);
+        if (walletManagement === null || walletManagement === void 0 ? void 0 : walletManagement.switchChain) {
+            const signer = yield walletManagement.switchChain(chainId);
             const account = yield extractAccountFromSigner(signer);
             setAccount(account);
+            return true;
         }
         return walletSwitchChain(chainId);
-    }), [config.walletManagement]);
+    }), [walletManagement]);
     const addChain = useCallback((chainId) => __awaiter(void 0, void 0, void 0, function* () {
-        var _b;
-        if ((_b = config.walletManagement) === null || _b === void 0 ? void 0 : _b.addChain) {
-            return config.walletManagement.addChain(chainId);
+        if (walletManagement === null || walletManagement === void 0 ? void 0 : walletManagement.addChain) {
+            return walletManagement.addChain(chainId);
         }
         return walletAddChain(chainId);
-    }), [config.walletManagement]);
+    }), [walletManagement]);
     const addToken = useCallback((chainId, token) => __awaiter(void 0, void 0, void 0, function* () {
-        var _c;
-        if ((_c = config.walletManagement) === null || _c === void 0 ? void 0 : _c.addToken) {
-            return config.walletManagement.addToken(token, chainId);
+        if (walletManagement === null || walletManagement === void 0 ? void 0 : walletManagement.addToken) {
+            return walletManagement.addToken(token, chainId);
         }
         return switchChainAndAddToken(chainId, token);
-    }), [config.walletManagement]);
+    }), [walletManagement]);
     // keep account information up to date
     useEffect(() => {
         const updateAccount = () => __awaiter(void 0, void 0, void 0, function* () {
-            if (config.walletManagement) {
-                const account = yield extractAccountFromSigner(config.walletManagement.signer);
-                setAccount(account);
-            }
-            else {
-                const account = yield extractAccountFromSigner(signer);
-                setAccount(account);
-            }
+            var _a;
+            const account = yield extractAccountFromSigner((_a = walletManagement === null || walletManagement === void 0 ? void 0 : walletManagement.signer) !== null && _a !== void 0 ? _a : signer);
+            setAccount(account);
         });
         updateAccount();
-    }, [signer, config.walletManagement]);
+    }, [signer, walletManagement]);
     const value = useMemo(() => ({
         connect,
         disconnect,
@@ -93,7 +84,7 @@ export const WalletProvider = ({ children }) => {
     }), [account, addChain, addToken, connect, disconnect, switchChain]);
     return (_jsx(WalletContext.Provider, Object.assign({ value: value }, { children: children })));
 };
-const extractAccountFromSigner = (signer) => __awaiter(void 0, void 0, void 0, function* () {
+export const extractAccountFromSigner = (signer) => __awaiter(void 0, void 0, void 0, function* () {
     return ({
         address: (yield (signer === null || signer === void 0 ? void 0 : signer.getAddress())) || undefined,
         isActive: (signer && !!(yield signer.getAddress()) === null) || !!signer,

package/providers/WidgetProvider/WidgetProvider.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ChainId, getChainByKey } from '@lifi/sdk';
+import { getChainByKey } from '@lifi/sdk';
 import { createContext, useContext, useEffect, useMemo } from 'react';
 import { updateLiFiConfig } from '../../config/lifi';
 const stub = () => {
@@ -22,24 +22,36 @@ const initialContext = {
 const WidgetContext = createContext(initialContext);
 export const useWidgetConfig = () => useContext(WidgetContext);
 export const WidgetProvider = (_a) => {
-    var { children } = _a, _b = _a.config, _c = _b === void 0 ? {} : _b, { fromChain, fromToken, toChain, toToken, integrator } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "integrator"]);
+    var { children } = _a, _b = _a.config, _c = _b === void 0 ? {} : _b, { fromChain, fromToken, toChain, toToken, fromAmount, integrator } = _c, config = __rest(_c, ["fromChain", "fromToken", "toChain", "toToken", "fromAmount", "integrator"]);
     const value = useMemo(() => {
+        var _a, _b, _c, _d;
         try {
-            return Object.assign(Object.assign({}, config), { fromChain: typeof fromChain === 'number'
-                    ? fromChain
-                    : typeof fromChain === 'string'
-                        ? getChainByKey(fromChain.toLowerCase()).id
-                        : ChainId.ETH, toChain: typeof toChain === 'number'
-                    ? toChain
-                    : typeof toChain === 'string'
-                        ? getChainByKey(toChain.toLowerCase()).id
-                        : ChainId.ETH, fromToken: fromToken === null || fromToken === void 0 ? void 0 : fromToken.toLowerCase(), toToken: toToken === null || toToken === void 0 ? void 0 : toToken.toLowerCase() });
+            const searchParams = Object.fromEntries(new URLSearchParams(window === null || window === void 0 ? void 0 : window.location.search));
+            return Object.assign(Object.assign({}, config), { fromChain: (searchParams.fromChain &&
+                    isNaN(parseInt(searchParams.fromChain, 10))) ||
+                    typeof fromChain === 'string'
+                    ? getChainByKey((_a = (searchParams.fromChain || fromChain)) === null || _a === void 0 ? void 0 : _a.toLowerCase()).id
+                    : (searchParams.fromChain &&
+                        !isNaN(parseInt(searchParams.fromChain, 10))) ||
+                        typeof fromChain === 'number'
+                        ? parseInt(searchParams.fromChain, 10) || fromChain
+                        : undefined, toChain: (searchParams.toChain && isNaN(parseInt(searchParams.toChain, 10))) ||
+                    typeof toChain === 'string'
+                    ? getChainByKey((_b = (searchParams.toChain || toChain)) === null || _b === void 0 ? void 0 : _b.toLowerCase()).id
+                    : (searchParams.toChain &&
+                        !isNaN(parseInt(searchParams.toChain, 10))) ||
+                        typeof toChain === 'number'
+                        ? parseInt(searchParams.toChain, 10) || toChain
+                        : undefined, fromToken: ((_c = searchParams.fromToken) === null || _c === void 0 ? void 0 : _c.toLowerCase()) || (fromToken === null || fromToken === void 0 ? void 0 : fromToken.toLowerCase()), toToken: ((_d = searchParams.toToken) === null || _d === void 0 ? void 0 : _d.toLowerCase()) || (toToken === null || toToken === void 0 ? void 0 : toToken.toLowerCase()), fromAmount: typeof searchParams.fromAmount === 'string' &&
+                    !isNaN(parseFloat(searchParams.fromAmount))
+                    ? searchParams.fromAmount
+                    : fromAmount });
         }
         catch (e) {
             console.warn(e);
             return config;
         }
-    }, [config, fromChain, fromToken, toChain, toToken]);
+    }, [config, fromAmount, fromChain, fromToken, toChain, toToken]);
     useEffect(() => {
         updateLiFiConfig({
             defaultRouteOptions: {

package/stores/route/types.d.ts

@@ -5,6 +5,7 @@ export interface RouteExecutionStore {
     updateRoute: (route: Route) => void;
     restartRoute: (routeId: string) => void;
     deleteRoute: (routeId: string) => void;
+    deleteRoutes: () => void;
 }
 export declare type RouteExecutionStatus = 'error' | 'idle' | 'loading' | 'success';
 export interface RouteExecution {

package/stores/route/useRouteStore.js

@@ -35,18 +35,6 @@ export const useRouteStore = create()(persist(immer((set) => ({
         }
     }),
     restartRoute: (routeId) => set((state) => {
-        var _a;
-        (_a = state.routes[routeId]) === null || _a === void 0 ? void 0 : _a.route.steps.forEach((step) => {
-            var _a, _b;
-            const stepHasFailed = ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED';
-            // check if the step has been cancelled which is a "failed" state
-            const stepHasBeenCancelled = (_b = step.execution) === null || _b === void 0 ? void 0 : _b.process.some((process) => process.status === 'CANCELLED');
-            if (step.execution && (stepHasFailed || stepHasBeenCancelled)) {
-                step.execution.status = 'RESUME';
-                // remove last (failed) process
-                step.execution.process.pop();
-            }
-        });
         state.routes[routeId].status = 'loading';
     }),
     deleteRoute: (routeId) => set((state) => {
@@ -54,6 +42,9 @@ export const useRouteStore = create()(persist(immer((set) => ({
             delete state.routes[routeId];
         }
     }),
+    deleteRoutes: () => set((state) => {
+        state.routes = {};
+    }),
 })), {
     name: 'li.fi-widget-routes',
     partialize: (state) => ({ routes: state.routes }),

package/types/index.d.ts

@@ -1 +1,2 @@
+export * from './token';
 export * from './widget';

package/types/index.js

@@ -1 +1,2 @@
+export * from './token';
 export * from './widget';

package/types/token.d.ts

@@ -0,0 +1,4 @@
+import { TokenAmount } from '@lifi/sdk';
+export interface Token extends TokenAmount {
+    featured?: boolean;
+}

package/types/token.js

@@ -0,0 +1 @@
+export {};