@lifi/widget 1.15.1 → 1.17.0

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

@@ -1,31 +1,22 @@
 /// <reference types="react" />
-export declare const ProgressCard: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+export declare const ChainCard: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;
     ref?: import("react").Ref<unknown> | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    variant?: "default" | "error" | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    variant?: ("default" | "error" | "selected") | undefined;
     dense?: boolean | undefined;
     indented?: boolean | undefined;
     onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
 }, {}, {}>;
-export declare const RouteCard: import("@emotion/styled").StyledComponent<{
-    action?: import("react").ReactNode;
-    avatar?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").CardHeaderClasses> | undefined;
-    disableTypography?: boolean | undefined;
-    subheader?: import("react").ReactNode;
-    subheaderTypographyProps?: import("@mui/material").TypographyProps<"span", {
-        component?: "span" | undefined;
-    }> | undefined;
-    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-    title?: import("react").ReactNode;
-    titleTypographyProps?: import("@mui/material").TypographyProps<"span", {
-        component?: "span" | undefined;
-    }> | undefined;
+export declare const ChainContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "title" | "action" | "sx" | "avatar" | "disableTypography" | "subheader" | "subheaderTypographyProps" | "titleTypographyProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/cjs/components/ChainSelect/ChainSelect.style.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChainContainer = exports.ChainCard = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const Card_1 = require("../../components/Card");
+exports.ChainCard = (0, styles_1.styled)(Card_1.Card)({
+    display: 'grid',
+    placeItems: 'center',
+    minWidth: 56,
+    height: 56,
+});
+exports.ChainContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(56px, 1fr))',
+    gridAutoRows: '56px',
+    justifyContent: 'space-between',
+    gap: theme.spacing(1.5),
+}));

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

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

package/cjs/components/ChainSelect/index.js

@@ -0,0 +1,18 @@
+"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("./ChainSelect"), exports);
+__exportStar(require("./useChainSelect"), exports);

package/cjs/components/ChainSelect/useChainSelect.d.ts

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

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

@@ -23,15 +23,15 @@ const GasSufficiencyMessage = (_a) => {
     var { route } = _a, props = __rest(_a, ["route"]);
     const { t } = (0, react_i18next_1.useTranslation)();
     const { insufficientFunds, insufficientGas } = (0, hooks_1.useGasSufficiency)(route);
-    if (!insufficientFunds && !insufficientGas.length) {
+    if (!insufficientFunds && !(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)) {
         return null;
     }
     return ((0, jsx_runtime_1.jsxs)(GasSufficiencyMessage_style_1.MessageCard, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(icons_material_1.WarningAmber, { sx: {
                     marginTop: 2,
                     marginLeft: 2,
-                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [insufficientGas.length ? ((0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length ? 0 : 2, pt: insufficientGas.length ? 1 : 2 }, { children: insufficientFunds
+                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? ((0, jsx_runtime_1.jsx)(Card_1.CardTitle, { children: t(`swap.warning.title.insufficientGas`) })) : null, insufficientFunds ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pb: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 0 : 2, pt: (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? 1 : 2 }, { children: insufficientFunds
                             ? t(`swap.warning.message.insufficientFunds`)
-                            : null }))) : null, insufficientGas.length ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, insufficientGas.length
+                            : null }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length) ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pt: 1 }, { children: t(`swap.warning.message.insufficientGas`) }))) : null, (insufficientGas === null || insufficientGas === void 0 ? void 0 : insufficientGas.length)
                         ? insufficientGas.map((item, index) => {
                             var _a, _b;
                             return ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", px: 2, pb: insufficientGas.length - 1 === index ? 2 : 0, pt: 0.5 }, { children: t(`swap.tokenOnChainAmount`, {

package/cjs/components/Header/Header.js

@@ -8,17 +8,9 @@ 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, providers_1.useWidgetConfig)();

package/cjs/components/Header/NavigationHeader.js

@@ -11,16 +11,6 @@ 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, navigateBack } = (0, hooks_1.useNavigateBack)();
@@ -41,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:
@@ -51,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: 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 }) })] })] })));
+    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/useHeaderActionStore.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="react" />
 import type { HeaderActionStore } from './types';
 export declare const useHeaderActionStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<HeaderActionStore>, "setState"> & {
     setState(nextStateOrUpdater: HeaderActionStore | Partial<HeaderActionStore> | ((state: import("immer/dist/internal").WritableDraft<HeaderActionStore>) => void), shouldReplace?: boolean | undefined): void;
 }>;
-export declare const useSetHeaderAction: () => (element?: import("react").ReactNode) => () => void;

package/cjs/components/Header/useHeaderActionStore.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSetHeaderAction = exports.useHeaderActionStore = void 0;
+exports.useHeaderActionStore = void 0;
 /* eslint-disable no-underscore-dangle */
 const zustand_1 = __importDefault(require("zustand"));
 const immer_1 = require("zustand/middleware/immer");
@@ -20,7 +20,3 @@ exports.useHeaderActionStore = (0, zustand_1.default)()((0, immer_1.immer)((set,
         });
     },
 })));
-const useSetHeaderAction = () => {
-    return (0, exports.useHeaderActionStore)((state) => state.setAction);
-};
-exports.useSetHeaderAction = useSetHeaderAction;

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

@@ -6,15 +6,15 @@ const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
 const ReverseTokensButton_1 = require("../components/ReverseTokensButton");
 const SelectTokenButton_1 = require("../components/SelectTokenButton");
-const SwapFormProvider_1 = require("../providers/SwapFormProvider");
+const providers_1 = require("../providers");
 const SelectChainAndToken = (props) => {
     const prefersNarrowView = (0, material_1.useMediaQuery)((theme) => theme.breakpoints.down('sm'));
     const [fromChain, toChain, fromToken, toToken] = (0, react_hook_form_1.useWatch)({
         name: [
-            SwapFormProvider_1.SwapFormKey.FromChain,
-            SwapFormProvider_1.SwapFormKey.ToChain,
-            SwapFormProvider_1.SwapFormKey.FromToken,
-            SwapFormProvider_1.SwapFormKey.ToToken,
+            providers_1.SwapFormKey.FromChain,
+            providers_1.SwapFormKey.ToChain,
+            providers_1.SwapFormKey.FromToken,
+            providers_1.SwapFormKey.ToToken,
         ],
     });
     const isCompact = fromChain && toChain && fromToken && toToken && !prefersNarrowView;

package/cjs/components/SendToWallet/SendToWallet.js

@@ -26,6 +26,12 @@ const SendToWallet = (props) => {
     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 {
@@ -42,12 +48,6 @@ const SendToWallet = (props) => {
         }),
         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/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.inProgress') })) : (
+    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

@@ -11,52 +11,33 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 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 react_hook_form_1 = require("react-hook-form");
+const material_1 = require("@mui/material");
 const react_i18next_1 = require("react-i18next");
 const react_router_dom_1 = require("react-router-dom");
 const hooks_1 = require("../../hooks");
 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 SwapButton = ({ onClick, currentRoute, text, disable, }) => {
     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, providers_1.useWidgetConfig)();
-    const { account, switchChain, connect: walletConnect } = (0, providers_1.useWallet)();
+    const { account, connect } = (0, providers_1.useWallet)();
     const { insufficientFunds, insufficientGas } = (0, hooks_1.useGasSufficiency)(currentRoute);
-    const [chainId] = (0, react_hook_form_1.useWatch)({
-        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 &&
-        currentRoute &&
-        !currentRoute.steps.some((step) => step.execution);
     const handleSwapButtonClick = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!account.isActive) {
             if (config.walletManagement) {
-                yield walletConnect();
+                yield connect();
             }
             else {
                 navigate(utils_1.navigationRoutes.selectWallet);
             }
         }
-        else if (switchChainAllowed) {
-            yield switchChain(chainId);
-            // check that the current route exists in the up to date route list
-        }
         else {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     });
     const getButtonText = () => {
         if (account.isActive) {
-            if (switchChainAllowed) {
-                return t(`button.switchChain`);
-            }
             if (!currentRoute) {
                 return t(`button.swap`);
             }
@@ -64,14 +45,6 @@ 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 ||
-            isValidating ||
-            !isValid) &&
-            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: insufficientFunds || !!(insufficientGas === null || insufficientGas === void 0 ? void 0 : 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/SwapRouteCard/SwapRouteCard.js

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

package/cjs/components/TokenAvatar/TokenAvatar.style.js

@@ -6,9 +6,6 @@ const Avatar_1 = require("@mui/material/Avatar");
 const Badge_1 = require("@mui/material/Badge");
 const styles_1 = require("@mui/material/styles");
 exports.TokenAvatarGroup = (0, styles_1.styled)(material_1.AvatarGroup)(({ theme }) => ({
-    [`& .${Avatar_1.avatarClasses.root}`]: {
-        background: theme.palette.background.paper,
-    },
     [`& .${Badge_1.badgeClasses.badge}:last-child .${Avatar_1.avatarClasses.root}`]: {
         marginLeft: theme.spacing(-1),
         boxSizing: 'border-box',

package/cjs/components/TokenList/TokenList.js

@@ -35,7 +35,9 @@ const TokenList = ({ formType, height, onClick, }) => {
             ? [searchedToken]
             : filteredTokens;
     const handleTokenClick = (0, react_1.useCallback)((tokenAddress) => {
-        setValue(providers_1.SwapFormKeyHelper.getTokenKey(formType), tokenAddress);
+        setValue(providers_1.SwapFormKeyHelper.getTokenKey(formType), tokenAddress, {
+            shouldDirty: true,
+        });
         setValue(providers_1.SwapFormKeyHelper.getAmountKey(formType), '');
         const oppositeFormType = formType === 'from' ? 'to' : 'from';
         const [selectedOppositeToken, selectedOppositeChain, selectedChain] = getValues([
@@ -45,10 +47,12 @@ const TokenList = ({ formType, height, onClick, }) => {
         ]);
         if (selectedOppositeToken === tokenAddress &&
             selectedOppositeChain === selectedChain) {
-            setValue(providers_1.SwapFormKeyHelper.getTokenKey(oppositeFormType), '');
+            setValue(providers_1.SwapFormKeyHelper.getTokenKey(oppositeFormType), '', {
+                shouldDirty: false,
+            });
         }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     }, [formType, getValues, onClick, setValue]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? (0, jsx_runtime_1.jsx)(TokenNotFound_1.TokenNotFound, {}) : null, (0, jsx_runtime_1.jsx)(VirtualizedTokenList_1.VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ ref: parentRef, style: { height, overflow: 'auto' } }, { children: [!tokens.length && !isLoading ? ((0, jsx_runtime_1.jsx)(TokenNotFound_1.TokenNotFound, { formType: formType })) : null, (0, jsx_runtime_1.jsx)(VirtualizedTokenList_1.VirtualizedTokenList, { tokens: tokens, featuredTokensLength: featuredTokens === null || featuredTokens === void 0 ? void 0 : featuredTokens.length, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isLoading, isBalanceLoading: isBalanceLoading, showBalance: account.isActive, showFeatured: !tokenSearchFilter, onClick: handleTokenClick })] })));
 };
 exports.TokenList = TokenList;

package/cjs/components/TokenList/TokenList.style.js

@@ -7,7 +7,8 @@ const styles_1 = require("@mui/material/styles");
 const utils_1 = require("../../utils");
 exports.ListItemButton = (0, styles_1.styled)(material_1.ListItemButton)(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusSecondary,
-    paddingLeft: theme.spacing(2),
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5),
     height: 64,
     width: '100%',
     '&:hover': {
@@ -21,8 +22,8 @@ exports.ListItem = (0, styles_1.styled)(material_1.ListItem)(({ theme }) => ({
     height: 64,
     flexDirection: 'column',
     alignItems: 'flex-start',
-    padding: theme.spacing(0, 3),
+    padding: theme.spacing(0, 1.5),
     [`.${ListItemSecondaryAction_1.listItemSecondaryActionClasses.root}`]: {
-        right: theme.spacing(5),
+        right: theme.spacing(3),
     },
 }));

package/cjs/components/TokenList/TokenListItem.js

@@ -19,7 +19,7 @@ exports.TokenListItem = (0, react_1.memo)(({ onClick, size, start, token, showBa
                                 }) }))) : null] })))) : null] })), endAdornment] })));
 });
 const TokenListItemSkeleton = () => {
-    return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItem, Object.assign({ secondaryAction: (0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {}), disablePadding: true, sx: { position: 'relative', flexDirection: 'row', alignItems: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 2, marginRight: 2 } }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 20 }), secondary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
+    return ((0, jsx_runtime_1.jsxs)(TokenList_style_1.ListItem, Object.assign({ secondaryAction: (0, jsx_runtime_1.jsx)(exports.TokenAmountSkeleton, {}), disablePadding: true, sx: { position: 'relative', flexDirection: 'row', alignItems: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", width: 32, height: 32, sx: { marginLeft: 1.5, marginRight: 2 } }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 48, height: 20 }), secondary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", width: 96, height: 20 }) })] })));
 };
 exports.TokenListItemSkeleton = TokenListItemSkeleton;
 const TokenAmountSkeleton = () => {

package/cjs/components/TokenList/TokenNotFound.d.ts

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