@lifi/widget 1.15.1 → 1.16.0

package/components/{SwapsInProgress/SwapsInProgress.style.d.ts → ChainSelect/ChainSelect.style.d.ts}

@@ -1,31 +1,22 @@
 /// <reference types="react" />
-export declare const ProgressCard: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+export declare const ChainCard: 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/styles").SxProps<import("@mui/material/styles").Theme> | 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/styles").Theme> & {
-    variant?: "default" | "error" | 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> & {
+    variant?: ("default" | "error" | "selected") | undefined;
     dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
 }, {}, {}>;
-export declare const RouteCard: import("@emotion/styled").StyledComponent<{
-    action?: import("react").ReactNode;
-    avatar?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").CardHeaderClasses> | undefined;
-    disableTypography?: boolean | undefined;
-    subheader?: import("react").ReactNode;
-    subheaderTypographyProps?: import("@mui/material").TypographyProps<"span", {
-        component?: "span" | undefined;
-    }> | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-    title?: import("react").ReactNode;
-    titleTypographyProps?: import("@mui/material").TypographyProps<"span", {
-        component?: "span" | undefined;
-    }> | undefined;
+export declare const ChainContainer: 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 | "title" | "action" | "sx" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, 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/components/ChainSelect/ChainSelect.style.js

@@ -0,0 +1,16 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { Card } from '../../components/Card';
+export const ChainCard = styled(Card)(({ theme }) => ({
+    display: 'grid',
+    placeItems: 'center',
+    width: 56,
+    height: 56,
+}));
+export const ChainContainer = styled(Box)(({ theme }) => ({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, 56px)',
+    gridAutoRows: '56px',
+    justifyContent: 'space-between',
+    gap: theme.spacing(1.5),
+}));

package/components/ChainSelect/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ChainSelect';
+export * from './useChainSelect';

package/components/ChainSelect/index.js

@@ -0,0 +1,2 @@
+export * from './ChainSelect';
+export * from './useChainSelect';

package/components/ChainSelect/useChainSelect.d.ts

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

package/components/ChainSelect/useChainSelect.js

@@ -0,0 +1,29 @@
+import { useFormContext } from 'react-hook-form';
+import { useChains } from '../../hooks';
+import { SwapFormKey, SwapFormKeyHelper } from '../../providers';
+import { useChainOrder } from '../../stores/chains';
+export const useChainSelect = (formType) => {
+    const { setValue } = useFormContext();
+    const { chains, isLoading } = useChains();
+    const [chainOrder, setChainOrder] = useChainOrder();
+    const chainKey = SwapFormKeyHelper.getChainKey(formType);
+    const getChains = () => {
+        if (!chains) {
+            return [];
+        }
+        const selectedChains = chainOrder
+            .map((chainId) => chains.find((chain) => chain.id === chainId))
+            .filter((chain) => chain);
+        return selectedChains;
+    };
+    const setCurrentChain = (chainId) => {
+        setValue(chainKey, chainId, { shouldDirty: true });
+        setValue(SwapFormKeyHelper.getTokenKey(formType), '', {
+            shouldDirty: false,
+        });
+        setValue(SwapFormKeyHelper.getAmountKey(formType), '');
+        setValue(SwapFormKey.TokenSearchFilter, '');
+        setChainOrder(chainId);
+    };
+    return { chains, getChains, setCurrentChain, isLoading };
+};

package/components/Header/Header.js

@@ -1,18 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLocation } from 'react-router-dom';
 import { useWidgetConfig } from '../../providers';
-import { ElementId, navigationRoutes } from '../../utils';
+import { ElementId, stickyHeaderRoutes } from '../../utils';
 import { Container } from './Header.style';
 import { NavigationHeader } from './NavigationHeader';
 import { WalletHeader } from './WalletHeader';
-const stickyHeaderRoutes = [
-    navigationRoutes.selectWallet,
-    navigationRoutes.settings,
-    navigationRoutes.swapRoutes,
-    navigationRoutes.swapExecution,
-    navigationRoutes.swapHistory,
-    navigationRoutes.swapDetails,
-];
 const HeaderContainer = ({ children }) => {
     const { pathname } = useLocation();
     return (_jsx(Container, Object.assign({ id: ElementId.Header, sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)) }, { children: children })));

package/components/Header/NavigationHeader.js

@@ -5,19 +5,9 @@ import { useTranslation } from 'react-i18next';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { useNavigateBack } from '../../hooks';
 import { useWallet } from '../../providers';
-import { navigationRoutes, navigationRoutesValues } from '../../utils';
+import { backButtonRoutes, navigationRoutes, navigationRoutesValues, } from '../../utils';
 import { HeaderAppBar } from './Header.style';
 import { useHeaderActionStore } from './useHeaderActionStore';
-const backButtonRoutes = [
-    navigationRoutes.selectWallet,
-    navigationRoutes.settings,
-    navigationRoutes.swapHistory,
-    navigationRoutes.fromToken,
-    navigationRoutes.toToken,
-    navigationRoutes.swapRoutes,
-    navigationRoutes.swapExecution,
-    navigationRoutes.swapDetails,
-];
 export const NavigationHeader = () => {
     const { t } = useTranslation();
     const { navigate, navigateBack } = useNavigateBack();
@@ -38,8 +28,13 @@ export const NavigationHeader = () => {
                 return t(`header.from`);
             case navigationRoutes.toToken:
                 return t(`header.to`);
+            case navigationRoutes.fromChain:
+            case navigationRoutes.toChain:
+                return t(`header.selectChain`);
             case navigationRoutes.swapRoutes:
                 return t(`header.routes`);
+            case navigationRoutes.activeSwaps:
+                return t(`header.activeSwaps`);
             case navigationRoutes.swapExecution:
                 return t(`header.swap`);
             case navigationRoutes.swapDetails:

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

@@ -2,7 +2,7 @@
 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>);
+    color?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue<string[] | import("csstype").Property.Color | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue<string[] | 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;

package/components/PoweredBy/PoweredBy.style.js

@@ -3,6 +3,7 @@ import { styled } from '@mui/material/styles';
 export const Link = styled(MuiLink)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
+    border: 'none',
     ':hover': {
         color: theme.palette.primary.main,
     },

package/components/SendToWallet/SendToWallet.js

@@ -23,6 +23,12 @@ export const SendToWallet = (props) => {
     const { showDestinationWallet } = useSettings(['showDestinationWallet']);
     const { account, provider } = useWallet();
     const { register, trigger, formState: { errors }, } = useFormContext();
+    useEffect(() => {
+        trigger(SwapFormKey.ToAddress);
+    }, [account.chainId, trigger]);
+    if (!showDestinationWallet) {
+        return null;
+    }
     const { onChange, onBlur, name, ref } = register(SwapFormKey.ToAddress, {
         validate: (value) => __awaiter(void 0, void 0, void 0, function* () {
             try {
@@ -39,11 +45,5 @@ export const SendToWallet = (props) => {
         }),
         onBlur: () => trigger(SwapFormKey.ToAddress),
     });
-    useEffect(() => {
-        trigger(SwapFormKey.ToAddress);
-    }, [account.chainId, trigger]);
-    if (!showDestinationWallet) {
-        return null;
-    }
     return (_jsxs(Card, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.sendToWallet') }), _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(Input, { ref: ref, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns') }), _jsx(FormHelperText, Object.assign({ error: !!errors.toAddress }, { children: (_a = errors.toAddress) === null || _a === void 0 ? void 0 : _a.message }))] }))] })));
 };

package/components/Step/CircularProgress.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Done as DoneIcon, Info as InfoIcon, Warning as WarningIcon, } from '@mui/icons-material';
+import { Done as DoneIcon, Info as InfoIcon, Warning as WarningIcon } from '@mui/icons-material';
 import { Box } from '@mui/material';
-import { CircularProgress as CircularProgressStyled, CircularProgressPending, } from './CircularProgress.style';
+import { CircularProgress as CircularProgressStyled, CircularProgressPending } from './CircularProgress.style';
 export function CircularProgress({ status }) {
     return (_jsxs(Box, Object.assign({ sx: {
             display: 'grid',
             position: 'relative',
             placeItems: 'center',
-        } }, { children: [_jsx(CircularProgressStyled, { variant: "determinate", status: status, size: 32, thickness: 3, value: 100 }), status === 'STARTED' || status === 'PENDING' ? (_jsx(CircularProgressPending, { size: 32, thickness: 3 })) : null, status === 'ACTION_REQUIRED' ? (_jsx(InfoIcon, { color: "primary", sx: {
+        } }, { children: [_jsx(CircularProgressStyled, { variant: "determinate", status: status, size: 32, thickness: 3, value: 100 }), status === 'STARTED' || status === 'PENDING' ? (_jsx(CircularProgressPending, { size: 32, thickness: 3 })) : null, status === 'ACTION_REQUIRED' ? (_jsx(InfoIcon, { color: "info", sx: {
                     position: 'absolute',
                     fontSize: '1rem',
                 } })) : null, status === 'DONE' ? (_jsx(DoneIcon, { color: "success", sx: {

package/components/Step/CircularProgress.style.js

@@ -18,7 +18,7 @@ const circleAnimation = keyframes({
 const getStatusColor = (status, theme) => {
     switch (status) {
         case 'ACTION_REQUIRED':
-            return theme.palette.primary.main;
+            return theme.palette.info.main;
         case 'DONE':
             return theme.palette.success.main;
         case 'FAILED':

package/components/Step/StepProcess.js

@@ -1,15 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Link as LinkIcon } from '@mui/icons-material';
 import { Box, Link, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useChains } from '../../hooks';
+import { useProcessMessage } from '../../hooks';
 import { CircularProgress } from './CircularProgress';
 import { LinkButton } from './StepProcess.style';
-import { getProcessMessage } from './utils';
 export const StepProcess = ({ step, process }) => {
-    const { t } = useTranslation();
-    const { getChainById } = useChains();
-    const { title, message } = getProcessMessage(t, getChainById, step, process);
+    const { title, message } = useProcessMessage(step, process);
     return (_jsxs(Box, Object.assign({ px: 2, py: 1 }, { children: [_jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     alignItems: 'center',

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

@@ -29,7 +29,7 @@ export declare const LinkButton: import("@emotion/styled").StyledComponent<{
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & 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>);
+    color?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue<string[] | import("csstype").Property.Color | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue<string[] | 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;

package/components/Step/StepTimer.d.ts

@@ -2,4 +2,5 @@
 import type { Step } from '@lifi/sdk';
 export declare const StepTimer: React.FC<{
     step: Step;
+    hideInProgress?: boolean;
 }>;

package/components/Step/StepTimer.js

@@ -7,7 +7,7 @@ const getExpiryTimestamp = (step) => {
     return new Date(((_c = (_b = (_a = step.execution) === null || _a === void 0 ? void 0 : _a.process[0]) === null || _b === void 0 ? void 0 : _b.startedAt) !== null && _c !== void 0 ? _c : Date.now()) +
         step.estimate.executionDuration * 1000);
 };
-export const StepTimer = ({ step }) => {
+export const StepTimer = ({ step, hideInProgress, }) => {
     var _a, _b;
     const { t } = useTranslation();
     const [isExpired, setExpired] = useState(false);
@@ -26,9 +26,7 @@ export const StepTimer = ({ step }) => {
             setExecutionStarted(true);
             restart(getExpiryTimestamp(step));
         }
-        const shouldBePaused = step.execution.process.some((process) => process.status === 'ACTION_REQUIRED' ||
-            process.status === 'CHAIN_SWITCH_REQUIRED' ||
-            process.status === 'FAILED');
+        const shouldBePaused = step.execution.process.some((process) => process.status === 'ACTION_REQUIRED' || process.status === 'FAILED');
         if (isRunning && shouldBePaused) {
             pause();
         }
@@ -50,11 +48,13 @@ export const StepTimer = ({ step }) => {
                 value: (step.estimate.executionDuration / 60).toFixed(0),
             }) }));
     }
+    const isTimerExpired = isExpired || (!minutes && !seconds);
     if (((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE' ||
-        ((_b = step.execution) === null || _b === void 0 ? void 0 : _b.status) === 'FAILED') {
+        ((_b = step.execution) === null || _b === void 0 ? void 0 : _b.status) === 'FAILED' ||
+        (isTimerExpired && hideInProgress)) {
         return null;
     }
-    return isExpired ? (_jsx(_Fragment, { children: t('swap.inProgress') })) : (
+    return isTimerExpired ? (_jsx(_Fragment, { children: t('swap.inProgress') })) : (
     // eslint-disable-next-line react/jsx-no-useless-fragment
     _jsx(_Fragment, { children: `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}` }));
 };

package/components/SwapButton/SwapButton.js

@@ -9,18 +9,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChainId } from '@lifi/sdk';
-import { useFormState, useWatch } from 'react-hook-form';
+import { Button } from '@mui/material';
+import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useChains, useGasSufficiency } from '../../hooks';
 import { SwapFormKeyHelper, useWallet, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
-import { Button } from './SwapButton.style';
-export const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
+export const SwapButton = ({ onClick, currentRoute, text, disable, }) => {
     var _a;
     const { t } = useTranslation();
     const navigate = useNavigate();
-    const { isValid, isValidating } = useFormState();
     const { getChainById } = useChains();
     const config = useWidgetConfig();
     const { account, switchChain, connect: walletConnect } = useWallet();
@@ -61,13 +60,7 @@ export const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
         }
         return t(`button.connectWallet`);
     };
-    return (_jsx(Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, 
-        // loading={isLoading || isFetching}
-        disabled: (insufficientFunds ||
-            !!insufficientGas.length ||
-            loading ||
-            isValidating ||
-            !isValid) &&
-            currentRoute &&
-            !switchChainAllowed, fullWidth: true }, { children: getButtonText() })));
+    return (_jsx(Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: currentRoute &&
+            !switchChainAllowed &&
+            (insufficientFunds || !!insufficientGas.length || disable), fullWidth: true }, { children: getButtonText() })));
 };

package/components/SwapButton/types.d.ts

@@ -1,7 +1,7 @@
-import { Route } from '@lifi/sdk';
+import type { Route } from '@lifi/sdk';
 export interface SwapButtonProps {
     onClick?(): void;
     currentRoute?: Route;
     text?: string;
-    loading?: boolean;
+    disable?: boolean;
 }

package/components/SwapRouteCard/SwapRouteCard.js

@@ -35,5 +35,5 @@ export const SwapRouteCard = (_a) => {
                     justifyContent: 'space-between',
                 } }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ fontSize: 18, fontWeight: "500", lineHeight: 1, pt: 0.25 }, { children: t(`swap.currency`, { value: (_c = route.gasCostUSD) !== null && _c !== void 0 ? _c : 0 }) })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.5 }, { children: t(`swap.gas`) }))] }), _jsxs(Box, { children: [_jsxs(Typography, Object.assign({ fontSize: 18, fontWeight: "500", display: "flex", justifyContent: "flex-end", lineHeight: 1, pt: 0.25 }, { children: ["~", (route.steps
                                         .map((step) => step.estimate.executionDuration)
-                                        .reduce((cumulated, x) => cumulated + x) / 60).toFixed(0)] })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary", textAlign: "end", lineHeight: 1, mt: 0.5 }, { children: t(`swap.minutes`) }))] })] }))] })));
+                                        .reduce((duration, x) => duration + x) / 60).toFixed(0)] })), _jsx(Typography, Object.assign({ fontSize: 12, color: "text.secondary", textAlign: "end", lineHeight: 1, mt: 0.5 }, { children: t(`swap.minutes`) }))] })] }))] })));
 };

package/components/TokenAvatar/TokenAvatar.style.js

@@ -3,9 +3,6 @@ import { avatarClasses } from '@mui/material/Avatar';
 import { badgeClasses } from '@mui/material/Badge';
 import { styled } from '@mui/material/styles';
 export const TokenAvatarGroup = styled(AvatarGroup)(({ theme }) => ({
-    [`& .${avatarClasses.root}`]: {
-        background: theme.palette.background.paper,
-    },
     [`& .${badgeClasses.badge}:last-child .${avatarClasses.root}`]: {
         marginLeft: theme.spacing(-1),
         boxSizing: 'border-box',

package/components/TokenList/TokenList.js

@@ -32,7 +32,9 @@ export const TokenList = ({ formType, height, onClick, }) => {
             ? [searchedToken]
             : filteredTokens;
     const handleTokenClick = useCallback((tokenAddress) => {
-        setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress);
+        setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress, {
+            shouldDirty: true,
+        });
         setValue(SwapFormKeyHelper.getAmountKey(formType), '');
         const oppositeFormType = formType === 'from' ? 'to' : 'from';
         const [selectedOppositeToken, selectedOppositeChain, selectedChain] = getValues([
@@ -42,7 +44,9 @@ export const TokenList = ({ formType, height, onClick, }) => {
         ]);
         if (selectedOppositeToken === tokenAddress &&
             selectedOppositeChain === selectedChain) {
-            setValue(SwapFormKeyHelper.getTokenKey(oppositeFormType), '');
+            setValue(SwapFormKeyHelper.getTokenKey(oppositeFormType), '', {
+                shouldDirty: false,
+            });
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     }, [formType, getValues, onClick, setValue]);

package/config/theme.js

@@ -85,7 +85,29 @@ export const createTheme = (mode, theme = {}) => {
                 defaultProps: {
                     disableElevation: true,
                 },
-                styleOverrides: Object.assign(Object.assign({}, (mode === 'dark'
+                styleOverrides: Object.assign({ root: {
+                        borderRadius: (_v = (_u = theme.shape) === null || _u === void 0 ? void 0 : _u.borderRadiusSecondary) !== null && _v !== void 0 ? _v : shape.borderRadiusSecondary,
+                        textTransform: 'none',
+                        fontSize: '1rem',
+                        '&.Mui-disabled, &.Mui-disabled:hover': {
+                            color: mode === 'light'
+                                ? 'rgb(0 0 0 / 70%)'
+                                : 'rgb(255 255 255 / 70%)',
+                            cursor: 'not-allowed',
+                            pointerEvents: 'auto',
+                        },
+                    }, contained: {
+                        '&:hover': {
+                            color: getContrastRatio(common.white, primaryMainColor) >= 3
+                                ? common.white
+                                : common.black,
+                        },
+                    }, sizeMedium: {
+                        padding: '10px 16px',
+                        [`.${dialogActionsClasses.root} &`]: {
+                            padding: '6px 12px',
+                        },
+                    } }, (mode === 'dark'
                     ? {
                         outlined: {
                             color: primaryLightColor,
@@ -103,28 +125,7 @@ export const createTheme = (mode, theme = {}) => {
                             },
                         },
                     }
-                    : {})), { root: {
-                        borderRadius: (_v = (_u = theme.shape) === null || _u === void 0 ? void 0 : _u.borderRadiusSecondary) !== null && _v !== void 0 ? _v : shape.borderRadiusSecondary,
-                        textTransform: 'none',
-                        fontSize: '1rem',
-                        padding: '10px 16px',
-                        [`.${dialogActionsClasses.root} &`]: {
-                            padding: '6px 12px',
-                        },
-                        '&.Mui-disabled, &.Mui-disabled:hover': {
-                            color: mode === 'light'
-                                ? 'rgb(0 0 0 / 70%)'
-                                : 'rgb(255 255 255 / 70%)',
-                            cursor: 'not-allowed',
-                            pointerEvents: 'auto',
-                        },
-                    }, contained: {
-                        '&:hover': {
-                            color: getContrastRatio(common.white, primaryMainColor) >= 3
-                                ? common.white
-                                : common.black,
-                        },
-                    } }),
+                    : {})),
             },
             MuiIconButton: {
                 styleOverrides: {

package/config/version.d.ts

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

package/config/version.js

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

package/hooks/index.d.ts

@@ -6,6 +6,7 @@ export * from './useFeaturedTokens';
 export * from './useGasSufficiency';
 export * from './useInitializer';
 export * from './useNavigateBack';
+export * from './useProcessMessage';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
 export * from './useSwapRoutes';
@@ -16,3 +17,4 @@ export * from './useTokenBalances';
 export * from './useTokens';
 export * from './useTokenSearch';
 export * from './useTools';
+export * from './useWidgetEvents';

package/hooks/index.js

@@ -6,6 +6,7 @@ export * from './useFeaturedTokens';
 export * from './useGasSufficiency';
 export * from './useInitializer';
 export * from './useNavigateBack';
+export * from './useProcessMessage';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
 export * from './useSwapRoutes';
@@ -16,3 +17,4 @@ export * from './useTokenBalances';
 export * from './useTokens';
 export * from './useTokenSearch';
 export * from './useTools';
+export * from './useWidgetEvents';

package/hooks/useChains.d.ts

@@ -1,101 +1,5 @@
 export declare const useChains: () => {
-    error: unknown;
-    isError: true;
-    isLoading: false;
-    isLoadingError: false;
-    isRefetchError: true;
-    isSuccess: false;
-    status: "error";
-    dataUpdatedAt: number;
-    errorUpdatedAt: number;
-    failureCount: number;
-    errorUpdateCount: number;
-    isFetched: boolean;
-    isFetchedAfterMount: boolean;
-    isFetching: boolean;
-    isPaused: boolean;
-    isPlaceholderData: boolean;
-    isPreviousData: boolean;
-    isRefetching: boolean;
-    isStale: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
-    remove: () => void;
-    fetchStatus: import("@tanstack/react-query").FetchStatus;
-    chains: import("@lifi/types").EVMChain[] | undefined;
-    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
-} | {
-    error: null;
-    isError: false;
-    isLoading: false;
-    isLoadingError: false;
-    isRefetchError: false;
-    isSuccess: true;
-    status: "success";
-    dataUpdatedAt: number;
-    errorUpdatedAt: number;
-    failureCount: number;
-    errorUpdateCount: number;
-    isFetched: boolean;
-    isFetchedAfterMount: boolean;
-    isFetching: boolean;
-    isPaused: boolean;
-    isPlaceholderData: boolean;
-    isPreviousData: boolean;
-    isRefetching: boolean;
-    isStale: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
-    remove: () => void;
-    fetchStatus: import("@tanstack/react-query").FetchStatus;
-    chains: import("@lifi/types").EVMChain[] | undefined;
-    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
-} | {
-    error: unknown;
-    isError: true;
-    isLoading: false;
-    isLoadingError: true;
-    isRefetchError: false;
-    isSuccess: false;
-    status: "error";
-    dataUpdatedAt: number;
-    errorUpdatedAt: number;
-    failureCount: number;
-    errorUpdateCount: number;
-    isFetched: boolean;
-    isFetchedAfterMount: boolean;
-    isFetching: boolean;
-    isPaused: boolean;
-    isPlaceholderData: boolean;
-    isPreviousData: boolean;
-    isRefetching: boolean;
-    isStale: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
-    remove: () => void;
-    fetchStatus: import("@tanstack/react-query").FetchStatus;
-    chains: import("@lifi/types").EVMChain[] | undefined;
-    getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
-} | {
-    error: null;
-    isError: false;
-    isLoading: true;
-    isLoadingError: false;
-    isRefetchError: false;
-    isSuccess: false;
-    status: "loading";
-    dataUpdatedAt: number;
-    errorUpdatedAt: number;
-    failureCount: number;
-    errorUpdateCount: number;
-    isFetched: boolean;
-    isFetchedAfterMount: boolean;
-    isFetching: boolean;
-    isPaused: boolean;
-    isPlaceholderData: boolean;
-    isPreviousData: boolean;
-    isRefetching: boolean;
-    isStale: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@lifi/types").EVMChain[], unknown>>;
-    remove: () => void;
-    fetchStatus: import("@tanstack/react-query").FetchStatus;
     chains: import("@lifi/types").EVMChain[] | undefined;
     getChainById: (chainId: number) => import("@lifi/types").EVMChain | undefined;
+    isLoading: boolean;
 };