@lifi/widget 1.14.0 → 1.15.1

package/cjs/components/Header/Header.js

@@ -3,7 +3,7 @@ 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");
@@ -21,7 +21,7 @@ const HeaderContainer = ({ children }) => {
     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 })));
 };
 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,7 +6,8 @@ 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");
@@ -22,15 +23,12 @@ const backButtonRoutes = [
 ];
 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:
@@ -53,6 +51,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: [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/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/cjs/components/{SwapInProgress/SwapInProgress.d.ts → 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)();
+    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),
+    });
+    (0, react_1.useEffect)(() => {
+        trigger(providers_1.SwapFormKey.ToAddress);
+    }, [account.chainId, trigger]);
+    if (!showDestinationWallet) {
+        return null;
+    }
+    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/StepTimer.js

@@ -57,7 +57,7 @@ const StepTimer = ({ step }) => {
         ((_b = step.execution) === null || _b === void 0 ? void 0 : _b.status) === 'FAILED') {
         return null;
     }
-    return isExpired ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: t('swap.networkIsBusy') })) : (
+    return isExpired ? ((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

@@ -16,21 +16,20 @@ 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, }) => {
     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 { isValid, isValidating } = (0, react_hook_form_1.useFormState)();
     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 &&
@@ -67,7 +66,11 @@ const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
     };
     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) &&
+        disabled: (insufficientFunds ||
+            !!insufficientGas.length ||
+            loading ||
+            isValidating ||
+            !isValid) &&
             currentRoute &&
             !switchChainAllowed, fullWidth: true }, { children: getButtonText() })));
 };

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 })));
 };

package/cjs/components/SwapRouteCard/SwapRouteCard.js

@@ -23,14 +23,15 @@ const SwapRouteCard = (_a) => {
     var _b, _c;
     var { route, active, dense } = _a, other = __rest(_a, ["route", "active", "dense"]);
     const { t } = (0, react_i18next_1.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 ((0, jsx_runtime_1.jsxs)(Card_1.Card, Object.assign({ dense: dense, indented: true }, other, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'space-between',
-                }, mb: 2 }, { children: (0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active }, { children: label })) })), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), mb: 2 }), !dense
+                }, mb: 2 }, { children: (0, jsx_runtime_1.jsx)(SwapRouteCard_style_1.Label, Object.assign({ active: active !== null && active !== void 0 ? active : label !== alternativeTag }, { children: label })) })), (0, jsx_runtime_1.jsx)(Token_1.Token, { token: Object.assign(Object.assign({}, route.toToken), { amount: route.toAmount }), mb: 2 }), !dense
                 ? route.steps.map((step) => ((0, jsx_runtime_1.jsx)(StepActions_1.StepActions, { step: step, mb: 2 }, step.id)))
                 : null, (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
                     display: 'flex',

package/cjs/components/SwapRouteCard/SwapRouteCard.style.js

@@ -7,16 +7,16 @@ const utils_1 = require("../../utils");
 exports.Label = (0, styles_1.styled)(material_1.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
-        ? (0, utils_1.getContrastTextColor)(theme, theme.palette.primary.main)
+        ? (0, utils_1.getContrastTextColor)(theme, theme.palette.secondary.main)
         : theme.palette.text.secondary,
     padding: theme.spacing(0.75),
     fontSize: 12,

package/cjs/components/SwapsInProgress/SwapsInProgress.d.ts

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

package/cjs/components/SwapsInProgress/SwapsInProgress.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwapsInProgress = 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_1 = require("react");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const providers_1 = require("../../providers");
+const stores_1 = require("../../stores");
+const utils_1 = require("../../utils");
+const Card_1 = require("../Card");
+const TokenAvatar_1 = require("../TokenAvatar");
+const SwapsInProgress_style_1 = require("./SwapsInProgress.style");
+const SwapsInProgress = (props) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const navigate = (0, react_router_dom_1.useNavigate)();
+    const { account } = (0, providers_1.useWallet)();
+    const executingRoutes = (0, stores_1.useExecutingRoutes)(account.address);
+    const handleCardClick = (0, react_1.useCallback)((routeId) => {
+        navigate(utils_1.navigationRoutes.swapExecution, { state: { routeId } });
+    }, [navigate]);
+    if (!(executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length)) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(SwapsInProgress_style_1.ProgressCard, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t('swap.activeTransfers') }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ spacing: 2, py: 2 }, { children: executingRoutes.map(({ route, status }) => ((0, jsx_runtime_1.jsx)(SwapsInProgress_style_1.RouteCard, { onClick: () => handleCardClick(route.id), avatar: (0, jsx_runtime_1.jsxs)(TokenAvatar_1.TokenAvatarGroup, Object.assign({ total: 2 }, { children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.fromToken }), (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.toToken })] })), action: (0, jsx_runtime_1.jsx)(icons_material_1.KeyboardArrowRight, {}), title: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [route.fromToken.symbol, (0, jsx_runtime_1.jsx)(icons_material_1.ArrowForward, { fontSize: "small", sx: { paddingX: 0.5 } }), route.toToken.symbol] })) }, route.id))) }))] })));
+};
+exports.SwapsInProgress = SwapsInProgress;

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

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

package/cjs/components/SwapsInProgress/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./SwapsInProgress"), exports);

package/cjs/components/TokenList/TokenList.js

@@ -6,19 +6,18 @@ const material_1 = require("@mui/material");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const hooks_1 = require("../../hooks");
-const SwapFormProvider_1 = require("../../providers/SwapFormProvider");
-const WalletProvider_1 = require("../../providers/WalletProvider");
+const providers_1 = require("../../providers");
 const TokenNotFound_1 = require("./TokenNotFound");
 const VirtualizedTokenList_1 = require("./VirtualizedTokenList");
 const TokenList = ({ formType, height, onClick, }) => {
     var _a, _b;
     const parentRef = (0, react_1.useRef)(null);
-    const { account } = (0, WalletProvider_1.useWallet)();
+    const { account } = (0, providers_1.useWallet)();
     const { setValue, getValues } = (0, react_hook_form_1.useFormContext)();
     const [selectedChainId] = (0, react_hook_form_1.useWatch)({
-        name: [SwapFormProvider_1.SwapFormKeyHelper.getChainKey(formType)],
+        name: [providers_1.SwapFormKeyHelper.getChainKey(formType)],
     });
-    const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([SwapFormProvider_1.SwapFormKey.TokenSearchFilter], 250);
+    const [tokenSearchFilter] = (0, hooks_1.useDebouncedWatch)([providers_1.SwapFormKey.TokenSearchFilter], 250);
     const { tokens: chainTokens, tokensWithBalance, isLoading: isTokensLoading, isBalanceLoading, featuredTokens, } = (0, hooks_1.useTokenBalances)(selectedChainId);
     let filteredTokens = ((_a = tokensWithBalance !== null && tokensWithBalance !== void 0 ? tokensWithBalance : chainTokens) !== null && _a !== void 0 ? _a : []);
     const searchFilter = (_b = tokenSearchFilter === null || tokenSearchFilter === void 0 ? void 0 : tokenSearchFilter.toUpperCase()) !== null && _b !== void 0 ? _b : '';
@@ -36,17 +35,17 @@ const TokenList = ({ formType, height, onClick, }) => {
             ? [searchedToken]
             : filteredTokens;
     const handleTokenClick = (0, react_1.useCallback)((tokenAddress) => {
-        setValue(SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(formType), tokenAddress);
-        setValue(SwapFormProvider_1.SwapFormKeyHelper.getAmountKey(formType), '');
+        setValue(providers_1.SwapFormKeyHelper.getTokenKey(formType), tokenAddress);
+        setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
         const oppositeFormType = formType === 'from' ? 'to' : 'from';
         const [selectedOppositeToken, selectedOppositeChain, selectedChain] = getValues([
-            SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(oppositeFormType),
-            SwapFormProvider_1.SwapFormKeyHelper.getChainKey(oppositeFormType),
-            SwapFormProvider_1.SwapFormKeyHelper.getChainKey(formType),
+            providers_1.SwapFormKeyHelper.getTokenKey(oppositeFormType),
+            providers_1.SwapFormKeyHelper.getChainKey(oppositeFormType),
+            providers_1.SwapFormKeyHelper.getChainKey(formType),
         ]);
         if (selectedOppositeToken === tokenAddress &&
             selectedOppositeChain === selectedChain) {
-            setValue(SwapFormProvider_1.SwapFormKeyHelper.getTokenKey(oppositeFormType), '');
+            setValue(providers_1.SwapFormKeyHelper.getTokenKey(oppositeFormType), '');
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     }, [formType, getValues, onClick, setValue]);

package/cjs/components/TokenList/VirtualizedTokenList.js

@@ -15,7 +15,7 @@ const VirtualizedTokenList = ({ tokens, featuredTokensLength, scrollElementRef,
     const { getVirtualItems, getTotalSize, scrollToIndex } = (0, react_virtual_1.useVirtualizer)({
         count: tokens.length,
         getScrollElement: () => scrollElementRef.current,
-        overscan: 5,
+        overscan: 10,
         paddingEnd: 12,
         estimateSize: (index) => {
             var _a, _b;

package/cjs/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/cjs/config/version.d.ts

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

package/cjs/config/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.version = exports.name = void 0;
 exports.name = '@lifi/widget';
-exports.version = '1.14.0';
+exports.version = '1.15.1';

package/cjs/hooks/index.d.ts

@@ -5,6 +5,7 @@ export * from './useDebouncedWatch';
 export * from './useFeaturedTokens';
 export * from './useGasSufficiency';
 export * from './useInitializer';
+export * from './useNavigateBack';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
 export * from './useSwapRoutes';

package/cjs/hooks/index.js

@@ -21,6 +21,7 @@ __exportStar(require("./useDebouncedWatch"), exports);
 __exportStar(require("./useFeaturedTokens"), exports);
 __exportStar(require("./useGasSufficiency"), exports);
 __exportStar(require("./useInitializer"), exports);
+__exportStar(require("./useNavigateBack"), exports);
 __exportStar(require("./useRouteExecution"), exports);
 __exportStar(require("./useScrollableContainer"), exports);
 __exportStar(require("./useSwapRoutes"), exports);