@lifi/widget 1.14.1 → 1.16.0

package/components/Header/WalletHeader.js

@@ -12,8 +12,7 @@ import { AccountBalanceWalletOutlined as AccountBalanceWalletIcon, Logout as Log
 import { Box, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useWallet } from '../../providers/WalletProvider';
-import { useWidgetConfig } from '../../providers/WidgetProvider';
+import { useWallet, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
 import { HeaderAppBar } from './Header.style';
 export const WalletHeader = () => {

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/ReverseTokensButton/ReverseTokensButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SwapHoriz as SwapHorizIcon, SwapVert as SwapVertIcon, } from '@mui/icons-material';
 import { useFormContext } from 'react-hook-form';
-import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { SwapFormKey } from '../../providers';
 import { IconButton } from './ReverseTokensButton.style';
 export const ReverseTokensButton = ({ vertical, }) => {
     const { setValue, getValues } = useFormContext();

package/components/SelectTokenButton/SelectTokenButton.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { SwapFormTypeProps } from '../../providers/SwapFormProvider';
+import type { SwapFormTypeProps } from '../../providers';
 export declare const SelectTokenButton: React.FC<SwapFormTypeProps & {
     compact: boolean;
 }>;

package/components/SelectTokenButton/SelectTokenButton.js

@@ -5,7 +5,7 @@ import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useChain, useToken } from '../../hooks';
-import { SwapFormKeyHelper } from '../../providers/SwapFormProvider';
+import { SwapFormKeyHelper } from '../../providers';
 import { navigationRoutes } from '../../utils';
 import { Card, CardTitle } from '../Card';
 import { TokenAvatar } from '../TokenAvatar';

package/components/SendToWallet/SendToWallet.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { BoxProps } from '@mui/material';
+export declare const SendToWallet: React.FC<BoxProps>;

package/components/SendToWallet/SendToWallet.js

@@ -0,0 +1,49 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isAddress } from '@ethersproject/address';
+import { FormHelperText } from '@mui/material';
+import { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { SwapFormKey, useWallet } from '../../providers';
+import { useSettings } from '../../stores';
+import { Card, CardTitle } from '../Card';
+import { FormControl, Input } from './SendToWallet.style';
+export const SendToWallet = (props) => {
+    var _a;
+    const { t } = useTranslation();
+    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 {
+                if (!value) {
+                    return true;
+                }
+                const address = yield (provider === null || provider === void 0 ? void 0 : provider.resolveName(value));
+                return (isAddress(address || value) ||
+                    t('swap.error.title.walletAddressInvalid'));
+            }
+            catch (_b) {
+                return t('swap.error.title.walletEnsAddressInvalid');
+            }
+        }),
+        onBlur: () => trigger(SwapFormKey.ToAddress),
+    });
+    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/SendToWallet/SendToWallet.style.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare const FormControl: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").FormControlClasses> | undefined;
+    color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | undefined;
+    disabled?: boolean | undefined;
+    error?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    focused?: boolean | undefined;
+    hiddenLabel?: boolean | undefined;
+    margin?: "none" | "normal" | "dense" | undefined;
+    required?: boolean | undefined;
+    size?: "small" | "medium" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "outlined" | "filled" | "standard" | 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 | "color" | "children" | "disabled" | "sx" | "margin" | "fullWidth" | "size" | "variant" | "error" | "required" | "focused" | "hiddenLabel"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const Input: import("@emotion/styled").StyledComponent<import("@mui/material").InputBaseProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/SendToWallet/SendToWallet.style.js

@@ -0,0 +1,12 @@
+import { FormControl as MuiFormControl, InputBase } from '@mui/material';
+import { inputBaseClasses } from '@mui/material/InputBase';
+import { styled } from '@mui/material/styles';
+export const FormControl = styled(MuiFormControl)(({ theme }) => ({
+    padding: theme.spacing(1.5, 2, 1.5, 0),
+}));
+export const Input = styled(InputBase)(({ theme }) => ({
+    [`.${inputBaseClasses.input}`]: {
+        height: 32,
+        padding: theme.spacing(0, 0, 0, 2),
+    },
+}));

package/components/SendToWallet/index.d.ts

@@ -0,0 +1 @@
+export * from './SendToWallet';

package/components/SendToWallet/index.js

@@ -0,0 +1 @@
+export * from './SendToWallet';

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.networkIsBusy') })) : (
+    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,19 +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 { 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 } from '../../providers/SwapFormProvider';
-import { useWallet } from '../../providers/WalletProvider';
-import { useWidgetConfig } from '../../providers/WidgetProvider';
+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 navigate = useNavigate();
     const { t } = useTranslation();
+    const navigate = useNavigate();
     const { getChainById } = useChains();
     const config = useWidgetConfig();
     const { account, switchChain, connect: walletConnect } = useWallet();
@@ -62,9 +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) &&
-            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/SwapInput/FormPriceHelperText.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { SwapFormTypeProps } from '../../providers/SwapFormProvider';
+import type { SwapFormTypeProps } from '../../providers';
 export declare const FormPriceHelperText: React.FC<SwapFormTypeProps & {
     selected: boolean;
 }>;

package/components/SwapInput/FormPriceHelperText.js

@@ -3,7 +3,7 @@ import { FormHelperText, Skeleton, Typography } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useTokenBalance } from '../../hooks';
-import { SwapFormKeyHelper } from '../../providers/SwapFormProvider';
+import { SwapFormKeyHelper } from '../../providers';
 import { formatTokenPrice } from '../../utils';
 export const FormPriceHelperText = ({ formType, selected }) => {
     const { t } = useTranslation();

package/components/SwapInput/SwapInput.d.ts

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

package/components/SwapInput/SwapInput.js

@@ -3,7 +3,7 @@ import { useLayoutEffect, useRef } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useChain, useToken } from '../../hooks';
-import { SwapFormKeyHelper } from '../../providers/SwapFormProvider';
+import { SwapFormKeyHelper } from '../../providers';
 import { fitInputText, formatAmount } from '../../utils';
 import { Card, CardTitle } from '../Card';
 import { TokenAvatar } from '../TokenAvatar';

package/components/SwapInput/SwapInputAdornment.d.ts

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

package/components/SwapInput/SwapInputAdornment.js

@@ -3,7 +3,7 @@ import { InputAdornment, Skeleton } from '@mui/material';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useTokenBalance } from '../../hooks';
-import { SwapFormKeyHelper } from '../../providers/SwapFormProvider';
+import { SwapFormKeyHelper } from '../../providers';
 import { Button } from './SwapInputAdornment.style';
 export const SwapInputAdornment = ({ formType }) => {
     const { t } = useTranslation();

package/components/SwapRouteCard/SwapRouteCard.js

@@ -20,19 +20,20 @@ export const SwapRouteCard = (_a) => {
     var _b, _c;
     var { route, active, dense } = _a, other = __rest(_a, ["route", "active", "dense"]);
     const { t } = useTranslation();
+    const alternativeTag = t(`swap.tags.ALTERNATIVE`);
     const label = ((_b = route.tags) === null || _b === void 0 ? void 0 : _b.length)
-        ? t(`swap.tags.${route.tags[0].toLowerCase()}`).toUpperCase()
-        : t(`swap.tags.general`).toUpperCase();
+        ? t(`swap.tags.${route.tags[0]}`)
+        : alternativeTag;
     return (_jsxs(Card, Object.assign({ dense: dense, indented: true }, other, { children: [_jsx(Box, Object.assign({ sx: {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'space-between',
-                }, mb: 2 }, { children: _jsx(Label, Object.assign({ active: active }, { children: label })) })), _jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), mb: 2 }), !dense
+                }, mb: 2 }, { children: _jsx(Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })) })), _jsx(Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), mb: 2 }), !dense
                 ? route.steps.map((step) => (_jsx(StepActions, { step: step, mb: 2 }, step.id)))
                 : null, _jsxs(Box, Object.assign({ sx: {
                     display: 'flex',
                     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/SwapRouteCard/SwapRouteCard.style.js

@@ -4,16 +4,16 @@ import { getContrastTextColor } from '../../utils';
 export const Label = styled(Typography, {
     shouldForwardProp: (prop) => prop !== 'active',
 })(({ theme, active }) => ({
-    backgroundColor: active ? theme.palette.primary.main : 'transparent',
+    backgroundColor: active ? theme.palette.secondary.main : 'transparent',
     border: '1px solid',
     borderColor: active
-        ? theme.palette.primary.main
+        ? theme.palette.secondary.main
         : theme.palette.mode === 'light'
             ? theme.palette.grey[500]
             : theme.palette.grey[600],
     borderRadius: theme.shape.borderRadiusSecondary,
     color: active
-        ? getContrastTextColor(theme, theme.palette.primary.main)
+        ? getContrastTextColor(theme, theme.palette.secondary.main)
         : theme.palette.text.secondary,
     padding: theme.spacing(0.75),
     fontSize: 12,

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

@@ -3,8 +3,7 @@ import { Box } from '@mui/material';
 import { useCallback, useRef } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useDebouncedWatch, useTokenBalances, useTokenSearch, } from '../../hooks';
-import { SwapFormKey, SwapFormKeyHelper, } from '../../providers/SwapFormProvider';
-import { useWallet } from '../../providers/WalletProvider';
+import { SwapFormKey, SwapFormKeyHelper, useWallet } from '../../providers';
 import { TokenNotFound } from './TokenNotFound';
 import { VirtualizedTokenList } from './VirtualizedTokenList';
 export const TokenList = ({ formType, height, onClick, }) => {
@@ -33,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([
@@ -43,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/components/TokenList/types.d.ts

@@ -1,6 +1,6 @@
 import type { TokenAmount } from '@lifi/sdk';
 import type { MutableRefObject } from 'react';
-import type { SwapFormDirection } from '../../providers/SwapFormProvider';
+import type { SwapFormDirection } from '../../providers';
 import type { Token } from '../../types';
 export interface TokenListProps {
     formType: SwapFormDirection;

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.14.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.14.1';
+export const version = '1.16.0';

package/hooks/index.d.ts

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

package/hooks/index.js

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