@lifi/widget 1.13.7 → 1.15.0

package/cjs/providers/WalletProvider/WalletProvider.js

@@ -28,7 +28,7 @@ const WalletContext = (0, react_1.createContext)(initialContext);
 const useWallet = () => (0, react_1.useContext)(WalletContext);
 exports.useWallet = useWallet;
 const WalletProvider = ({ children, walletManagement }) => {
-    const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, } = (0, wallet_management_1.useLiFiWalletManagement)();
+    const { connect: walletManagementConnect, disconnect: walletManagementDisconnect, signer, provider, } = (0, wallet_management_1.useLiFiWalletManagement)();
     const [account, setAccount] = (0, react_1.useState)({});
     const connect = (0, react_1.useCallback)((wallet) => __awaiter(void 0, void 0, void 0, function* () {
         if (walletManagement) {
@@ -85,17 +85,18 @@ const WalletProvider = ({ children, walletManagement }) => {
         addChain,
         addToken,
         account,
-    }), [account, addChain, addToken, connect, disconnect, switchChain]);
+        provider,
+    }), [account, addChain, addToken, connect, disconnect, provider, switchChain]);
     return ((0, jsx_runtime_1.jsx)(WalletContext.Provider, Object.assign({ value: value }, { children: children })));
 };
 exports.WalletProvider = WalletProvider;
 const extractAccountFromSigner = (signer) => __awaiter(void 0, void 0, void 0, function* () {
     try {
         return {
-            address: (yield (signer === null || signer === void 0 ? void 0 : signer.getAddress())) || undefined,
+            address: yield (signer === null || signer === void 0 ? void 0 : signer.getAddress()),
             isActive: (signer && !!(yield signer.getAddress()) === null) || !!signer,
             signer,
-            chainId: (yield (signer === null || signer === void 0 ? void 0 : signer.getChainId())) || undefined,
+            chainId: yield (signer === null || signer === void 0 ? void 0 : signer.getChainId()),
         };
     }
     catch (error) {

package/cjs/providers/WalletProvider/types.d.ts

@@ -1,8 +1,10 @@
+import type { Web3Provider } from '@ethersproject/providers';
 import type { Token } from '@lifi/sdk';
 import type { Wallet } from '@lifi/wallet-management';
 import type { Signer } from 'ethers';
 export interface WalletContextProps {
     account: WalletAccount;
+    provider?: Web3Provider;
     addChain(chainId: number): Promise<boolean>;
     addToken(chainId: number, token: Token): Promise<void>;
     disconnect(): void;
@@ -10,8 +12,8 @@ export interface WalletContextProps {
     connect(wallet?: Wallet | undefined): Promise<void>;
 }
 export interface WalletAccount {
-    address?: string;
     isActive?: boolean;
-    signer?: Signer;
     chainId?: number;
+    address?: string;
+    signer?: Signer;
 }

package/cjs/providers/WidgetProvider/WidgetProvider.js

@@ -16,6 +16,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@lifi/sdk");
 const react_1 = require("react");
 const lifi_1 = require("../../config/lifi");
+const version_1 = require("../../config/version");
 const stub = () => {
     throw new Error('You forgot to wrap your component in <WidgetProvider>.');
 };
@@ -63,6 +64,9 @@ const WidgetProvider = (_a) => {
             },
         });
     }, [integrator]);
+    (0, react_1.useEffect)(() => {
+        (0, sdk_1.checkPackageUpdates)(version_1.name, version_1.version);
+    }, []);
     return ((0, jsx_runtime_1.jsx)(WidgetContext.Provider, Object.assign({ value: value }, { children: children })));
 };
 exports.WidgetProvider = WidgetProvider;

package/cjs/providers/index.d.ts

@@ -0,0 +1,4 @@
+export * from './SwapFormProvider';
+export * from './ThemeProvider';
+export * from './WalletProvider';
+export * from './WidgetProvider';

package/cjs/providers/index.js

@@ -0,0 +1,20 @@
+"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("./SwapFormProvider"), exports);
+__exportStar(require("./ThemeProvider"), exports);
+__exportStar(require("./WalletProvider"), exports);
+__exportStar(require("./WidgetProvider"), exports);

package/cjs/stores/route/useRouteStore.js

@@ -54,4 +54,40 @@ exports.useRouteStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, i
 })), {
     name: 'li.fi-widget-routes',
     partialize: (state) => ({ routes: state.routes }),
+    merge: (persistedState, currentState) => {
+        const state = Object.assign(Object.assign({}, currentState), persistedState);
+        try {
+            const routeString = localStorage.getItem('routes');
+            if (routeString) {
+                const routes = JSON.parse(routeString);
+                routes.forEach((route) => {
+                    if (state.routes[route.id]) {
+                        return;
+                    }
+                    state.routes[route.id] = {
+                        route,
+                        status: 'idle',
+                    };
+                    const isFailed = route.steps.some((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'FAILED'; });
+                    if (isFailed) {
+                        state.routes[route.id].status = 'error';
+                        return;
+                    }
+                    const isDone = route.steps.every((step) => { var _a; return ((_a = step.execution) === null || _a === void 0 ? void 0 : _a.status) === 'DONE'; });
+                    if (isDone) {
+                        state.routes[route.id].status = 'success';
+                        return;
+                    }
+                    const isLoading = route.steps.some((step) => step.execution);
+                    if (isLoading) {
+                        state.routes[route.id].status = 'loading';
+                    }
+                });
+            }
+        }
+        catch (error) {
+            console.log(error);
+        }
+        return state;
+    },
 }));

package/cjs/stores/settings/types.d.ts

@@ -7,9 +7,10 @@ export declare const SettingsToolTypes: SettingsToolType[];
 export interface SettingsState {
     advancedPreferences: boolean;
     appearance: Appearance;
+    gasPrice: string;
     routePriority: Order;
+    showDestinationWallet: boolean;
     slippage: string;
-    gasPrice: string;
     enabledBridges?: string[];
     _enabledBridges?: Record<string, boolean>;
     enabledExchanges?: string[];

package/cjs/stores/settings/useSettingsStore.d.ts

@@ -8,9 +8,10 @@ export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<Omit
             setTools(toolType: import("./types").SettingsToolType, tools: string[], availableTools: (Pick<import("@lifi/types").Bridge, "key"> | Pick<import("@lifi/types").Exchange, "key">)[]): void;
             advancedPreferences: boolean;
             appearance: import("../..").Appearance;
+            gasPrice: string;
             routePriority: "RECOMMENDED" | "FASTEST" | "CHEAPEST" | "SAFEST";
+            showDestinationWallet: boolean;
             slippage: string;
-            gasPrice: string;
             _enabledBridges?: Record<string, boolean> | undefined;
             _enabledExchanges?: Record<string, boolean> | undefined;
         }>>) => void;
@@ -26,9 +27,10 @@ export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<Omit
             setTools(toolType: import("./types").SettingsToolType, tools: string[], availableTools: (Pick<import("@lifi/types").Bridge, "key"> | Pick<import("@lifi/types").Exchange, "key">)[]): void;
             advancedPreferences: boolean;
             appearance: import("../..").Appearance;
+            gasPrice: string;
             routePriority: "RECOMMENDED" | "FASTEST" | "CHEAPEST" | "SAFEST";
+            showDestinationWallet: boolean;
             slippage: string;
-            gasPrice: string;
             _enabledBridges?: Record<string, boolean> | undefined;
             _enabledExchanges?: Record<string, boolean> | undefined;
         }>>;

package/cjs/stores/settings/useSettingsStore.js

@@ -22,6 +22,7 @@ const immer_1 = require("zustand/middleware/immer");
 const types_1 = require("./types");
 exports.useSettingsStore = (0, zustand_1.default)()((0, middleware_1.persist)((0, immer_1.immer)((set) => ({
     advancedPreferences: false,
+    showDestinationWallet: false,
     appearance: 'auto',
     gasPrice: 'normal',
     routePriority: 'RECOMMENDED',

package/cjs/types/widget.d.ts

@@ -19,6 +19,7 @@ export interface WidgetWalletManagement {
 }
 interface WidgetConfigBase {
     fromAmount?: number | string;
+    toAddress?: string;
     containerStyle?: CSSProperties;
     theme?: ThemeConfig;
     appearance?: Appearance;

package/cjs/utils/format.js

@@ -68,8 +68,13 @@ const formatAmount = (amount = '', returnInitial = false) => {
     if (parsedAmount < 0) {
         return Math.abs(parsedAmount).toString();
     }
-    if (returnInitial) {
-        return amount;
+    try {
+        if (returnInitial && (0, big_js_1.default)(amount)) {
+            return amount;
+        }
+    }
+    catch (_a) {
+        return '';
     }
     return (0, big_js_1.default)(parsedAmount).toString();
 };

package/components/Header/Header.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLocation } from 'react-router-dom';
-import { useWidgetConfig } from '../../providers/WidgetProvider';
+import { useWidgetConfig } from '../../providers';
 import { ElementId, navigationRoutes } from '../../utils';
 import { Container } from './Header.style';
 import { NavigationHeader } from './NavigationHeader';

package/components/Header/NavigationHeader.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { ArrowBack as ArrowBackIcon, History as HistoryIcon, SettingsOutlined as SettingsIcon, } from '@mui/icons-material';
 import { Box, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
-import { useWallet } from '../../providers/WalletProvider';
+import { Route, Routes, useLocation } from 'react-router-dom';
+import { useNavigateBack } from '../../hooks';
+import { useWallet } from '../../providers';
 import { navigationRoutes, navigationRoutesValues } from '../../utils';
 import { HeaderAppBar } from './Header.style';
 import { useHeaderActionStore } from './useHeaderActionStore';
@@ -19,15 +20,12 @@ const backButtonRoutes = [
 ];
 export const NavigationHeader = () => {
     const { t } = useTranslation();
-    const navigate = useNavigate();
+    const { navigate, navigateBack } = useNavigateBack();
     const { account } = useWallet();
     const { element } = useHeaderActionStore();
     const { pathname } = useLocation();
     const path = pathname.substring(pathname.lastIndexOf('/') + 1);
     const hasPath = navigationRoutesValues.includes(path);
-    const handleBack = () => {
-        navigate(-1);
-    };
     const handleHeaderTitle = () => {
         switch (path) {
             case navigationRoutes.selectWallet:
@@ -50,5 +48,5 @@ export const NavigationHeader = () => {
                 return t(`header.swap`);
         }
     };
-    return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "start", onClick: handleBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "swap-history", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory) }, { children: _jsx(HistoryIcon, {}) }))) : null, _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: () => navigate(navigationRoutes.settings) }, { children: _jsx(SettingsIcon, {}) }))] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] })));
+    return (_jsxs(HeaderAppBar, Object.assign({ elevation: 0 }, { children: [backButtonRoutes.includes(path) ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "start", onClick: navigateBack }, { children: _jsx(ArrowBackIcon, {}) }))) : null, _jsx(Typography, Object.assign({ fontSize: hasPath ? 18 : 24, align: hasPath ? 'center' : 'left', fontWeight: "700", flex: 1, noWrap: true }, { children: handleHeaderTitle() })), _jsxs(Routes, { children: [_jsx(Route, { path: navigationRoutes.home, element: _jsxs(_Fragment, { children: [account.isActive ? (_jsx(IconButton, Object.assign({ size: "medium", "aria-label": "swap-history", edge: "start", onClick: () => navigate(navigationRoutes.swapHistory) }, { children: _jsx(HistoryIcon, {}) }))) : null, _jsx(IconButton, Object.assign({ size: "medium", "aria-label": "settings", edge: "end", onClick: () => navigate(navigationRoutes.settings) }, { children: _jsx(SettingsIcon, {}) }))] }) }), _jsx(Route, { path: "*", element: element || _jsx(Box, { width: 28, height: 40 }) })] })] })));
 };

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/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/{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/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();
+    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),
+    });
+    useEffect(() => {
+        trigger(SwapFormKey.ToAddress);
+    }, [account.chainId, trigger]);
+    if (!showDestinationWallet) {
+        return null;
+    }
+    return (_jsxs(Card, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.sendToWallet') }), _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(Input, { ref: ref, size: "small", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", onChange: onChange, onBlur: onBlur, name: name, placeholder: t('swap.walletAddressOrEns') }), _jsx(FormHelperText, Object.assign({ error: !!errors.toAddress }, { children: (_a = errors.toAddress) === null || _a === void 0 ? void 0 : _a.message }))] }))] })));
+};

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

@@ -54,7 +54,7 @@ export const StepTimer = ({ step }) => {
         ((_b = step.execution) === null || _b === void 0 ? void 0 : _b.status) === 'FAILED') {
         return null;
     }
-    return isExpired ? (_jsx(_Fragment, { children: t('swap.networkIsBusy') })) : (
+    return isExpired ? (_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,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChainId } from '@lifi/sdk';
-import { useWatch } from 'react-hook-form';
+import { useFormState, 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, }) => {
     var _a;
-    const navigate = useNavigate();
     const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { isValid, isValidating } = useFormState();
     const { getChainById } = useChains();
     const config = useWidgetConfig();
     const { account, switchChain, connect: walletConnect } = useWallet();
@@ -64,7 +63,11 @@ export const SwapButton = ({ onClick, currentRoute, text, loading, }) => {
     };
     return (_jsx(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/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,14 +20,15 @@ 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',

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/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/components/{SwapInProgress/SwapInProgress.js → SwapsInProgress/SwapsInProgress.js}

@@ -4,13 +4,13 @@ import { Box, Stack } from '@mui/material';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { useWallet } from '../../providers/WalletProvider';
+import { useWallet } from '../../providers';
 import { useExecutingRoutes } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { CardTitle } from '../Card';
 import { TokenAvatar, TokenAvatarGroup } from '../TokenAvatar';
-import { ProgressCard, RouteCard } from './SwapInProgress.style';
-export const SwapInProgress = (props) => {
+import { ProgressCard, RouteCard } from './SwapsInProgress.style';
+export const SwapsInProgress = (props) => {
     const { t } = useTranslation();
     const navigate = useNavigate();
     const { account } = useWallet();
@@ -21,5 +21,5 @@ export const SwapInProgress = (props) => {
     if (!(executingRoutes === null || executingRoutes === void 0 ? void 0 : executingRoutes.length)) {
         return null;
     }
-    return (_jsxs(ProgressCard, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.inProgress') }), _jsx(Stack, Object.assign({ spacing: 2, py: 2 }, { children: executingRoutes.map(({ route, status }) => (_jsx(RouteCard, { onClick: () => handleCardClick(route.id), avatar: _jsxs(TokenAvatarGroup, Object.assign({ total: 2 }, { children: [_jsx(TokenAvatar, { token: route.fromToken }), _jsx(TokenAvatar, { token: route.toToken })] })), action: _jsx(KeyboardArrowRightIcon, {}), title: _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [route.fromToken.symbol, _jsx(ArrowForwardIcon, { fontSize: "small", sx: { paddingX: 0.5 } }), route.toToken.symbol] })) }, route.id))) }))] })));
+    return (_jsxs(ProgressCard, Object.assign({}, props, { children: [_jsx(CardTitle, { children: t('swap.activeTransfers') }), _jsx(Stack, Object.assign({ spacing: 2, py: 2 }, { children: executingRoutes.map(({ route, status }) => (_jsx(RouteCard, { onClick: () => handleCardClick(route.id), avatar: _jsxs(TokenAvatarGroup, Object.assign({ total: 2 }, { children: [_jsx(TokenAvatar, { token: route.fromToken }), _jsx(TokenAvatar, { token: route.toToken })] })), action: _jsx(KeyboardArrowRightIcon, {}), title: _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [route.fromToken.symbol, _jsx(ArrowForwardIcon, { fontSize: "small", sx: { paddingX: 0.5 } }), route.toToken.symbol] })) }, route.id))) }))] })));
 };

package/components/SwapsInProgress/index.d.ts

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

package/components/SwapsInProgress/index.js

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

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, }) => {

package/components/TokenList/VirtualizedTokenList.js

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

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;