@lifi/widget 1.14.1 → 1.16.0

package/cjs/components/ChainSelect/useChainSelect.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useChainSelect = void 0;
+const react_hook_form_1 = require("react-hook-form");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
+const chains_1 = require("../../stores/chains");
+const useChainSelect = (formType) => {
+    const { setValue } = (0, react_hook_form_1.useFormContext)();
+    const { chains, isLoading } = (0, hooks_1.useChains)();
+    const [chainOrder, setChainOrder] = (0, chains_1.useChainOrder)();
+    const chainKey = providers_1.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(providers_1.SwapFormKeyHelper.getTokenKey(formType), '', {
+            shouldDirty: false,
+        });
+        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
+        setValue(providers_1.SwapFormKey.TokenSearchFilter, '');
+        setChainOrder(chainId);
+    };
+    return { chains, getChains, setCurrentChain, isLoading };
+};
+exports.useChainSelect = useChainSelect;

package/cjs/components/Header/Header.js

@@ -3,25 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_router_dom_1 = require("react-router-dom");
-const WidgetProvider_1 = require("../../providers/WidgetProvider");
+const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
 const Header_style_1 = require("./Header.style");
 const NavigationHeader_1 = require("./NavigationHeader");
 const WalletHeader_1 = require("./WalletHeader");
-const stickyHeaderRoutes = [
-    utils_1.navigationRoutes.selectWallet,
-    utils_1.navigationRoutes.settings,
-    utils_1.navigationRoutes.swapRoutes,
-    utils_1.navigationRoutes.swapExecution,
-    utils_1.navigationRoutes.swapHistory,
-    utils_1.navigationRoutes.swapDetails,
-];
 const HeaderContainer = ({ children }) => {
     const { pathname } = (0, react_router_dom_1.useLocation)();
-    return ((0, jsx_runtime_1.jsx)(Header_style_1.Container, Object.assign({ id: utils_1.ElementId.Header, sticky: stickyHeaderRoutes.some((route) => pathname.includes(route)) }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(Header_style_1.Container, Object.assign({ id: utils_1.ElementId.Header, sticky: utils_1.stickyHeaderRoutes.some((route) => pathname.includes(route)) }, { children: children })));
 };
 const Header = () => {
-    const { walletManagement } = (0, WidgetProvider_1.useWidgetConfig)();
+    const { walletManagement } = (0, providers_1.useWidgetConfig)();
     return ((0, jsx_runtime_1.jsxs)(HeaderContainer, { children: [!walletManagement ? (0, jsx_runtime_1.jsx)(WalletHeader_1.WalletHeader, {}) : null, (0, jsx_runtime_1.jsx)(NavigationHeader_1.NavigationHeader, {})] }));
 };
 exports.Header = Header;

package/cjs/components/Header/NavigationHeader.js

@@ -6,31 +6,19 @@ const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
-const WalletProvider_1 = require("../../providers/WalletProvider");
+const hooks_1 = require("../../hooks");
+const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
 const Header_style_1 = require("./Header.style");
 const useHeaderActionStore_1 = require("./useHeaderActionStore");
-const backButtonRoutes = [
-    utils_1.navigationRoutes.selectWallet,
-    utils_1.navigationRoutes.settings,
-    utils_1.navigationRoutes.swapHistory,
-    utils_1.navigationRoutes.fromToken,
-    utils_1.navigationRoutes.toToken,
-    utils_1.navigationRoutes.swapRoutes,
-    utils_1.navigationRoutes.swapExecution,
-    utils_1.navigationRoutes.swapDetails,
-];
 const NavigationHeader = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    const { account } = (0, WalletProvider_1.useWallet)();
+    const { navigate, navigateBack } = (0, hooks_1.useNavigateBack)();
+    const { account } = (0, providers_1.useWallet)();
     const { element } = (0, useHeaderActionStore_1.useHeaderActionStore)();
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const path = pathname.substring(pathname.lastIndexOf('/') + 1);
     const hasPath = utils_1.navigationRoutesValues.includes(path);
-    const handleBack = () => {
-        navigate(-1);
-    };
     const handleHeaderTitle = () => {
         switch (path) {
             case utils_1.navigationRoutes.selectWallet:
@@ -43,8 +31,13 @@ const NavigationHeader = () => {
                 return t(`header.from`);
             case utils_1.navigationRoutes.toToken:
                 return t(`header.to`);
+            case utils_1.navigationRoutes.fromChain:
+            case utils_1.navigationRoutes.toChain:
+                return t(`header.selectChain`);
             case utils_1.navigationRoutes.swapRoutes:
                 return t(`header.routes`);
+            case utils_1.navigationRoutes.activeSwaps:
+                return t(`header.activeSwaps`);
             case utils_1.navigationRoutes.swapExecution:
                 return t(`header.swap`);
             case utils_1.navigationRoutes.swapDetails:
@@ -53,6 +46,6 @@ const NavigationHeader = () => {
                 return t(`header.swap`);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "start", onClick: handleBack }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBack, {}) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "swap-history", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.History, {}) }))) : null, (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: () => navigate(utils_1.navigationRoutes.settings) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SettingsOutlined, {}) }))] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] })));
+    return ((0, jsx_runtime_1.jsxs)(Header_style_1.HeaderAppBar, Object.assign({ elevation: 0 }, { children: [utils_1.backButtonRoutes.includes(path) ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "start", onClick: navigateBack }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.ArrowBack, {}) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: utils_1.navigationRoutes.home, element: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [account.isActive ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "swap-history", edge: "start", onClick: () => navigate(utils_1.navigationRoutes.swapHistory) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.History, {}) }))) : null, (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: () => navigate(utils_1.navigationRoutes.settings) }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.SettingsOutlined, {}) }))] }) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "*", element: element || (0, jsx_runtime_1.jsx)(material_1.Box, { width: 28, height: 40 }) })] })] })));
 };
 exports.NavigationHeader = NavigationHeader;

package/cjs/components/Header/WalletHeader.js

@@ -15,13 +15,12 @@ const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
-const WalletProvider_1 = require("../../providers/WalletProvider");
-const WidgetProvider_1 = require("../../providers/WidgetProvider");
+const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
 const Header_style_1 = require("./Header.style");
 const WalletHeader = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
-    const { account, disconnect } = (0, WalletProvider_1.useWallet)();
+    const { account, disconnect } = (0, providers_1.useWallet)();
     const walletAddress = account.address
         ? `${account.address.substring(0, 7)}...${account.address.substring(account.address.length - 7)}`
         : null;
@@ -34,8 +33,8 @@ const WalletHeader = () => {
 exports.WalletHeader = WalletHeader;
 const ConnectButton = () => {
     const { pathname } = (0, react_router_dom_1.useLocation)();
-    const config = (0, WidgetProvider_1.useWidgetConfig)();
-    const { connect: walletConnect } = (0, WalletProvider_1.useWallet)();
+    const config = (0, providers_1.useWidgetConfig)();
+    const { connect: walletConnect } = (0, providers_1.useWallet)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const connect = () => __awaiter(void 0, void 0, void 0, function* () {
         if (config.walletManagement) {

package/cjs/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/cjs/components/PoweredBy/PoweredBy.style.js

@@ -6,6 +6,7 @@ const styles_1 = require("@mui/material/styles");
 exports.Link = (0, styles_1.styled)(material_1.Link)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
+    border: 'none',
     ':hover': {
         color: theme.palette.primary.main,
     },

package/cjs/components/ReverseTokensButton/ReverseTokensButton.js

@@ -4,22 +4,22 @@ exports.ReverseTokensButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const react_hook_form_1 = require("react-hook-form");
-const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
+const providers_1 = require("../../providers");
 const ReverseTokensButton_style_1 = require("./ReverseTokensButton.style");
 const ReverseTokensButton = ({ vertical, }) => {
     const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
     const handleClick = () => {
         const [fromChain, fromToken, toChain, toToken] = getValues([
-            SwapFormProvider_1.SwapFormKey.FromChain,
-            SwapFormProvider_1.SwapFormKey.FromToken,
-            SwapFormProvider_1.SwapFormKey.ToChain,
-            SwapFormProvider_1.SwapFormKey.ToToken,
+            providers_1.SwapFormKey.FromChain,
+            providers_1.SwapFormKey.FromToken,
+            providers_1.SwapFormKey.ToChain,
+            providers_1.SwapFormKey.ToToken,
         ]);
-        setValue(SwapFormProvider_1.SwapFormKey.FromAmount, '');
-        setValue(SwapFormProvider_1.SwapFormKey.FromChain, toChain);
-        setValue(SwapFormProvider_1.SwapFormKey.FromToken, toToken);
-        setValue(SwapFormProvider_1.SwapFormKey.ToChain, fromChain);
-        setValue(SwapFormProvider_1.SwapFormKey.ToToken, fromToken);
+        setValue(providers_1.SwapFormKey.FromAmount, '');
+        setValue(providers_1.SwapFormKey.FromChain, toChain);
+        setValue(providers_1.SwapFormKey.FromToken, toToken);
+        setValue(providers_1.SwapFormKey.ToChain, fromChain);
+        setValue(providers_1.SwapFormKey.ToToken, fromToken);
     };
     return ((0, jsx_runtime_1.jsx)(ReverseTokensButton_style_1.IconButton, Object.assign({ onClick: handleClick, size: "small", "aria-label": "swap-destinations" }, { children: vertical ? (0, jsx_runtime_1.jsx)(icons_material_1.SwapVert, {}) : (0, jsx_runtime_1.jsx)(icons_material_1.SwapHoriz, {}) })));
 };

package/cjs/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/cjs/components/SelectTokenButton/SelectTokenButton.js

@@ -8,7 +8,7 @@ const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../hooks");
-const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
+const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
 const Card_1 = require("../Card");
 const TokenAvatar_1 = require("../TokenAvatar");
@@ -18,8 +18,8 @@ const SelectTokenButton = ({ formType, compact }) => {
     const navigate = (0, react_router_dom_1.useNavigate)();
     const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
         name: [
-            SwapFormProvider_1.SwapFormKeyHelper.getChainKey(formType),
-            SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(formType),
+            providers_1.SwapFormKeyHelper.getChainKey(formType),
+            providers_1.SwapFormKeyHelper.getTokenKey(formType),
         ],
     });
     const { chain, isLoading: isChainLoading } = (0, hooks_1.useChain)(chainId);

package/{components/SwapInProgress/SwapInProgress.d.ts → cjs/components/SendToWallet/SendToWallet.d.ts}

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

package/cjs/components/SendToWallet/SendToWallet.js

@@ -0,0 +1,53 @@
+"use strict";
+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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SendToWallet = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const address_1 = require("@ethersproject/address");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const react_i18next_1 = require("react-i18next");
+const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const Card_1 = require("../Card");
+const SendToWallet_style_1 = require("./SendToWallet.style");
+const SendToWallet = (props) => {
+    var _a;
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { showDestinationWallet } = (0, stores_1.useSettings)(['showDestinationWallet']);
+    const { account, provider } = (0, providers_1.useWallet)();
+    const { register, trigger, formState: { errors }, } = (0, react_hook_form_1.useFormContext)();
+    (0, react_1.useEffect)(() => {
+        trigger(providers_1.SwapFormKey.ToAddress);
+    }, [account.chainId, trigger]);
+    if (!showDestinationWallet) {
+        return null;
+    }
+    const { onChange, onBlur, name, ref } = register(providers_1.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 ((0, address_1.isAddress)(address || value) ||
+                    t('swap.error.title.walletAddressInvalid'));
+            }
+            catch (_b) {
+                return t('swap.error.title.walletEnsAddressInvalid');
+            }
+        }),
+        onBlur: () => trigger(providers_1.SwapFormKey.ToAddress),
+    });
+    return ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.sendToWallet') }), (0, jsx_runtime_1.jsxs)(SendToWallet_style_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(SendToWallet_style_1.Input, { ref: ref, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns') }), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, Object.assign({ error: !!errors.toAddress }, { children: (_a = errors.toAddress) === null || _a === void 0 ? void 0 : _a.message }))] }))] })));
+};
+exports.SendToWallet = SendToWallet;

package/cjs/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/cjs/components/SendToWallet/SendToWallet.style.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = exports.FormControl = void 0;
+const material_1 = require("@mui/material");
+const InputBase_1 = require("@mui/material/InputBase");
+const styles_1 = require("@mui/material/styles");
+exports.FormControl = (0, styles_1.styled)(material_1.FormControl)(({ theme }) => ({
+    padding: theme.spacing(1.5, 2, 1.5, 0),
+}));
+exports.Input = (0, styles_1.styled)(material_1.InputBase)(({ theme }) => ({
+    [`.${InputBase_1.inputBaseClasses.input}`]: {
+        height: 32,
+        padding: theme.spacing(0, 0, 0, 2),
+    },
+}));

package/cjs/components/SendToWallet/index.d.ts

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

package/cjs/components/{SwapInProgress → SendToWallet}/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./SwapInProgress"), exports);
+__exportStar(require("./SendToWallet"), exports);

package/cjs/components/Step/CircularProgress.js

@@ -10,7 +10,7 @@ function CircularProgress({ status }) {
             display: 'grid',
             position: 'relative',
             placeItems: 'center',
-        } }, { children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularProgress, { variant: "determinate", status: status, size: 32, thickness: 3, value: 100 }), status === 'STARTED' || status === 'PENDING' ? ((0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularProgressPending, { size: 32, thickness: 3 })) : null, status === 'ACTION_REQUIRED' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary", sx: {
+        } }, { children: [(0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularProgress, { variant: "determinate", status: status, size: 32, thickness: 3, value: 100 }), status === 'STARTED' || status === 'PENDING' ? ((0, jsx_runtime_1.jsx)(CircularProgress_style_1.CircularProgressPending, { size: 32, thickness: 3 })) : null, status === 'ACTION_REQUIRED' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "info", sx: {
                     position: 'absolute',
                     fontSize: '1rem',
                 } })) : null, status === 'DONE' ? ((0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "success", sx: {

package/cjs/components/Step/CircularProgress.style.js

@@ -21,7 +21,7 @@ const circleAnimation = (0, styles_1.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/cjs/components/Step/StepProcess.js

@@ -4,15 +4,11 @@ exports.StepProcess = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
-const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
 const CircularProgress_1 = require("./CircularProgress");
 const StepProcess_style_1 = require("./StepProcess.style");
-const utils_1 = require("./utils");
 const StepProcess = ({ step, process }) => {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const { getChainById } = (0, hooks_1.useChains)();
-    const { title, message } = (0, utils_1.getProcessMessage)(t, getChainById, step, process);
+    const { title, message } = (0, hooks_1.useProcessMessage)(step, process);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ px: 2, py: 1 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                     display: 'flex',
                     alignItems: 'center',

package/cjs/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/cjs/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/cjs/components/Step/StepTimer.js

@@ -10,7 +10,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);
 };
-const StepTimer = ({ step }) => {
+const StepTimer = ({ step, hideInProgress, }) => {
     var _a, _b;
     const { t } = (0, react_i18next_1.useTranslation)();
     const [isExpired, setExpired] = (0, react_1.useState)(false);
@@ -29,9 +29,7 @@ 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();
         }
@@ -53,11 +51,13 @@ 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 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: t('swap.networkIsBusy') })) : (
+    return isTimerExpired ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: t('swap.inProgress') })) : (
     // eslint-disable-next-line react/jsx-no-useless-fragment
     (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: `${minutes}:${seconds < 10 ? `0${seconds}` : seconds}` }));
 };

package/cjs/components/SwapButton/SwapButton.js

@@ -12,25 +12,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwapButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@lifi/sdk");
+const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../hooks");
-const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
-const WalletProvider_1 = require("../../providers/WalletProvider");
-const WidgetProvider_1 = require("../../providers/WidgetProvider");
+const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
-const SwapButton_style_1 = require("./SwapButton.style");
-const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
+const SwapButton = ({ onClick, currentRoute, text, disable, }) => {
     var _a;
-    const navigate = (0, react_router_dom_1.useNavigate)();
     const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
     const { getChainById } = (0, hooks_1.useChains)();
-    const config = (0, WidgetProvider_1.useWidgetConfig)();
-    const { account, switchChain, connect: walletConnect } = (0, WalletProvider_1.useWallet)();
+    const config = (0, providers_1.useWidgetConfig)();
+    const { account, switchChain, connect: walletConnect } = (0, providers_1.useWallet)();
     const { insufficientFunds, insufficientGas } = (0, hooks_1.useGasSufficiency)(currentRoute);
     const [chainId] = (0, react_hook_form_1.useWatch)({
-        name: [SwapFormProvider_1.SwapFormKeyHelper.getChainKey('from')],
+        name: [providers_1.SwapFormKeyHelper.getChainKey('from')],
     });
     // Allow switching chain only if execution is not started
     const switchChainAllowed = ((_a = getChainById(chainId || sdk_1.ChainId.ETH)) === null || _a === void 0 ? void 0 : _a.id) !== account.chainId &&
@@ -65,10 +63,8 @@ const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
         }
         return t(`button.connectWallet`);
     };
-    return ((0, jsx_runtime_1.jsx)(SwapButton_style_1.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 ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", color: account.isActive ? 'primary' : 'success', onClick: handleSwapButtonClick, disabled: currentRoute &&
+            !switchChainAllowed &&
+            (insufficientFunds || !!insufficientGas.length || disable), fullWidth: true }, { children: getButtonText() })));
 };
 exports.SwapButton = SwapButton;

package/cjs/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/cjs/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/cjs/components/SwapInput/FormPriceHelperText.js

@@ -6,15 +6,15 @@ const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
-const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
+const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
 const FormPriceHelperText = ({ formType, selected }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const [amount, chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
         name: [
-            SwapFormProvider_1.SwapFormKeyHelper.getAmountKey(formType),
-            SwapFormProvider_1.SwapFormKeyHelper.getChainKey(formType),
-            SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(formType),
+            providers_1.SwapFormKeyHelper.getAmountKey(formType),
+            providers_1.SwapFormKeyHelper.getChainKey(formType),
+            providers_1.SwapFormKeyHelper.getTokenKey(formType),
         ],
     });
     const { token, isLoading } = (0, hooks_1.useTokenBalance)(chainId, tokenAddress);

package/cjs/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/cjs/components/SwapInput/SwapInput.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
-const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
+const providers_1 = require("../../providers");
 const utils_1 = require("../../utils");
 const Card_1 = require("../Card");
 const TokenAvatar_1 = require("../TokenAvatar");
@@ -17,12 +17,12 @@ const SwapInput = ({ formType }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const ref = (0, react_1.useRef)(null);
-    const amountKey = SwapFormProvider_1.SwapFormKeyHelper.getAmountKey(formType);
+    const amountKey = providers_1.SwapFormKeyHelper.getAmountKey(formType);
     const [amount, chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
         name: [
             amountKey,
-            SwapFormProvider_1.SwapFormKeyHelper.getChainKey(formType),
-            SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(formType),
+            providers_1.SwapFormKeyHelper.getChainKey(formType),
+            providers_1.SwapFormKeyHelper.getTokenKey(formType),
         ],
     });
     const { chain } = (0, hooks_1.useChain)(chainId);

package/cjs/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/cjs/components/SwapInput/SwapInputAdornment.js

@@ -6,21 +6,21 @@ const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
 const react_i18next_1 = require("react-i18next");
 const hooks_1 = require("../../hooks");
-const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
+const providers_1 = require("../../providers");
 const SwapInputAdornment_style_1 = require("./SwapInputAdornment.style");
 const SwapInputAdornment = ({ formType }) => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { setValue } = (0, react_hook_form_1.useFormContext)();
     const [chainId, tokenAddress] = (0, react_hook_form_1.useWatch)({
         name: [
-            SwapFormProvider_1.SwapFormKeyHelper.getChainKey(formType),
-            SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(formType),
+            providers_1.SwapFormKeyHelper.getChainKey(formType),
+            providers_1.SwapFormKeyHelper.getTokenKey(formType),
         ],
     });
     const { token, isLoading } = (0, hooks_1.useTokenBalance)(chainId, tokenAddress);
     const handleMax = () => {
         var _a;
-        setValue(SwapFormProvider_1.SwapFormKeyHelper.getAmountKey(formType), (_a = token === null || token === void 0 ? void 0 : token.amount) !== null && _a !== void 0 ? _a : '');
+        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), (_a = token === null || token === void 0 ? void 0 : token.amount) !== null && _a !== void 0 ? _a : '');
     };
     return ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isLoading && tokenAddress ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 46, height: 20, sx: { borderRadius: 0.5 } })) : formType === 'from' && (token === null || token === void 0 ? void 0 : token.amount) ? ((0, jsx_runtime_1.jsx)(SwapInputAdornment_style_1.Button, Object.assign({ onClick: handleMax, variant: "outlined" }, { children: t('button.max') }))) : null })));
 };